CODEWITHSUNDEEP
htmlcss
WJA
WJA

Reputation: 7004

How to create flexible div items that break after the line?

I am trying to create "shopping items" embedded in a div that have a certain fixed width and height. I know that you can do display: inline !important; to keep the div's on one line.

However, how can I make it such that it breaks when the window size becomes smaller, preferably when the outer div is smaller?

Here is an illustration: enter image description here

Here is what I tried:

<div class="row">
            <div class="col-sm-12">

                <div class="items">
                   <div class="item">
                       <p>Hello</p>
                   </div>
                   <div class="item">
                       <p>Hello</p>
                   </div>
                   <div class="item">
                       <p>Hello</p>
                   </div>
                   <div class="item">
                       <p>Hello</p>
                   </div>
                </div>

            </div>
        </div>

and css:

.items {
    display: flex !important;
    flex-wrap: wrap !important;
    -webkit-flex-wrap: wrap !important;
    -moz-flex-wrap: wrap !important;
    -o-flex-wrap: wrap !important;
    -ms-flex-wrap: wrap !important;
}
.item {
    width: 200px !important;
    height: 500px !important;
    margin: 10px !important;
    text-align: center !important;
}

Upvotes: 1

Views: 143

Answers (5)

Ricky Ruiz
Ricky Ruiz

Reputation: 26771

You can use flex-basis to ensure your elements are always 200px if it cannot grow nor shrink.

Using the flex shorthand property:

flex: 0 0 200px; /* 'flex-grow: 0' 'flex-shrink: 0' 'flex-basis: 200px' */


.items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.item {
  box-sizing: border-box;
  flex: 0 0 200px;  /* <'flex-grow'> <'flex-shrink'> <'flex-basis'> */
  height: 100px;
  margin-bottom: .5em;  /* Space between flex-items vertically*/
  text-align: center;
  border: 2px dashed grey;
}
<div class="row">
  <div class="col-sm-12">
    <div class="items">
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
    </div>
  </div>
</div>

Notes:

  • In the demo we use the recommended syntax, which is using the flex shorthand property.
  • Do not overuse the !important flag. It should not be needed in any of your classes.
  • Removed vendor prefixes for demo simplicity.

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105903

With flex you can also set a breaking point (without mediaquerie) when boxes reaches 200px of width and also span them on the whole line:

(bootstrap included in snippet , i do not really see troubles there)

.row {
  text-align: center;
}

.items {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
}

.item {
  /* with a breaking point at 200px width */
  min-width: 200px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  /* or without min-width nor flex, just:
  width:200px; it will wrap everytime needed and boxes will keep a static width */
  height: 150px;/* none or whatever*/
  margin: 10px 30px;/* whatever*/
  text-align: center;
  border: solid;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-sm-12">
    <div class="items">
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
    </div>

  </div>
</div>

Upvotes: 1

dave
dave

Reputation: 11

As an alternative to the other options I would suggest a look at isotope (http://isotope.metafizzy.co/). The benefits of using this over a pure css solution would become more apparent if you decided to include any filtering or sorting of your shopping items.

Upvotes: 0

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

You can use CSS Flexbox. Its handles it easily.

Have a look at the snippet below (resize your browser to see them in action):

.outer {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 100px;
  height: 100px;
  padding-top: 10px;
  text-align: center;
  background: #eee;
  border: 3px solid #aaa;
  margin: 20px;
}

body {
  padding: 20px;
}
<div class="outer">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

Hope this helps!

Upvotes: 1

Adri&#225;n Silvestre
Adri&#225;n Silvestre

Reputation: 145

So easy like that;

float: left;

Upvotes: 1

Related Questions