Using CSS flex, is it possible to force an equal number of items per row?
I am able to get the items to wrap, but not to have the same number per row (Fiddle).
.container {
display: flex;
flex-flow: row wrap;
position: relative;
}
.container > div {
padding: 49px;
flex: 1;
box-sizing: border-box;
}
Here is a diagram of what I'm trying to accomplish:
For 3 items per row, add on the flex items: flex-basis: 33.333333% You can also use the flex 's shorthand like the following: flex: 0 0 33.333333% => which also means flex-basis: 33.333333% .
Making things wrap If you want to cause them to wrap once they become too wide you must add the flex-wrap property with a value of wrap , or use the shorthand flex-flow with values of row wrap or column wrap . Items will then wrap in the container.
nowrap: The default value of wrap-flex is nowrap. It is used to specify that the item has no wrap. It makes item wrap in single lines.
break should take up 100% of the width of the container (because we set flex-basis: 100% ), the breaking flex item needs to sit on its own row to accomplish that. It can't share a row with the first item so it will break to a new row, which will leave the first item alone on one row.
May be you are looking for quantity queries, where you change the style depending on how many items there are on a list
a list apart article
.container {
display: flex;
flex-flow: row wrap;
border: solid 1px green;
}
.container > div {
flex: 1 0;
background-color: lightgreen;
height: 30px;
margin: 5px;
}
.item:first-child:nth-last-child(3),
.item:first-child:nth-last-child(3) ~ .item {
flex-basis: 30%;
}
.item:first-child:nth-last-child(4),
.item:first-child:nth-last-child(4) ~ .item {
flex-basis: 40%;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
You can use flex-wrap
to control wrapping and media queries to adjust the size of flex items:
.container {
display: flex;
flex-flow: row nowrap; /* disable browser-controlled wrapping */
}
.container > div {
padding: 49px 0;
text-align: center;
flex: 1;
box-sizing: border-box;
}
input[type=button] {
background: red;
}
@media ( max-width: 700px) {
.container { flex-wrap: wrap; }
.container > div { flex-basis: 33.33%; }
}
@media ( max-width: 400px) {
.container > div { flex-basis: 50%; }
}
<div class="container">
<div><input type="button" value="Button 1"></div>
<div><input type="button" value="Button 2"></div>
<div><input type="button" value="Button 3"></div>
<div><input type="button" value="Button 4"></div>
<div><input type="button" value="Button 5"></div>
<div><input type="button" value="Button 6"></div>
</div>
revised fiddle
In the example above, at a certain breakpoint (screen width 700px, in this case), flex-wrap: wrap
is enabled and each flex item becomes 33% wide, forcing three items per row.
At a smaller breakpoint, flex-basis
adjusts to 50%
, allowing only two items per row.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With