How to control number of items per row using media queries in Flexbox?
I had to get rid of the margin around the blocks, because percentage widths are difficult to cleanly apply to elements with margins, but you can see the changes at http://codepen.io/anon/pen/jPeLYb?editors=110 :
@mixin max-width($width) {
@media screen and (max-width: $width) {
@content;
}
}
.container {
position: relative;
display: flex;
flex-flow: row wrap;
}
.item {
background-color: tomato;
box-sizing: border-box;
padding: 20px;
outline: 2px solid blue;
flex: 1;
}
@include max-width(992px) {
.item {
flex-basis: 25%;
background-color: red;
}
}
@include max-width(640px) {
.item {
flex-basis: 50%;
background-color: green;
}
}
The important parts here are:
flex-flow: row wrap
which allows the flexbox to appear on multiple rows (the default isnowrap
)flex-basis
which is the equivalent ofwidth
in this caseposition: relative
which makes the widths relative to the container, rather than the body (this would screw up the rounding)
I have found a better solution for restricting the number of columns in a row in different devices without using media queries:
HTML:
<div class="flex-container">
<div class="item">
<h3>ONE</h3>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque maxime odit ipsam, fugit pariatur quis eos
maiores nostrum? Alias tempora voluptate veritatis omnis quae corporis vero excepturi in rem ipsam.
</div>
<div class="item">
<h3>TWO</h3>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque maxime odit ipsam, fugit pariatur quis eos
maiores nostrum? Alias tempora voluptate veritatis omnis quae corporis vero excepturi in rem ipsam.
</div>
<div class="item">
<h3>THREE</h3>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque maxime odit ipsam, fugit pariatur quis eos
maiores nostrum? Alias tempora voluptate veritatis omnis quae corporis vero excepturi in rem ipsam.
</div>
<div class="item">
<h3>FOUR</h3>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque maxime odit ipsam, fugit pariatur quis eos
maiores nostrum? Alias tempora voluptate veritatis omnis quae corporis vero excepturi in rem ipsam.
</div>
</div>
CSS:
.flex-container {
display: flex;
flex-wrap: wrap;
}
.item {
box-sizing: border-box;
flex: 1 0 250px;
margin: 1rem;
padding: 1rem;
border: 1px solid #000;
border-radius: 5px;
}
Codepen link: https://codepen.io/bala285/pen/YzqpLod
Source: https://www.fourkitchens.com/blog/article/responsive-multi-column-lists-flexbox/