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

Question

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:
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;
}

Answer 1

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>

Answer 2

So easy like that;
float: left;

Answer 3

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!

Answer 4

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.

Answer 5

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.