5 items per row, auto-resize items in flexbox
You are right in giving a flex-basis: 20%
but you have to adjust for the 4px margin on each flex item for it to wrap properly.
Equal Width Flex items in the last row
Use flex: 0 1 calc(20% - 8px)
- this means the item won't grow beyond 20% of width (adjusting for margin) and can shrink based on the container width. See demo below:
.container {
background: gray;
width: 600px;
height: 200px; /* height given for illustration */
display: flex;
flex-flow: row wrap;
position: relative;
}
.item {
background: blue;
margin: 4px;
flex: 0 1 calc(20% - 8px); /* <-- adjusting for margin */
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Another approach is a bit hacky - you can keep flex-grow
set to one and flex-basis: calc(20% - 4px)
using flex: 1 1 calc(20% - 4px)
, and use a pseudo element that fills the remaining space:
.container {
background: gray;
width: 600px;
height: 200px; /* height given for illustration */
display: flex;
flex-flow: row wrap;
position: relative;
}
.item {
background: blue;
margin: 4px;
flex: 1 1 calc(20% - 8px); /* <-- adjusting for margin */
}
.container:after {
content: '';
display: block;
flex: 999; /* grow by a large number */
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
If you don't have the n item per row requirement then you can refer this:
- Unordered list that acts like grid-auto-flow dense
Flex items in last row expands to fill the available space
If in a row you have less than 5 items and you want them to fill in the remaining space use flex: 1 1 calc(20% - 8px)
(note that flex-grow
is set to 1 here so that the flex items in the last rows expand to fill the remaining space):
.container {
background: gray;
width: 600px;
height: 200px; /* height given for illustration */
display: flex;
flex-flow: row wrap;
position: relative;
}
.item {
background: blue;
margin: 4px;
flex: 1 1 calc(20% - 8px); /* <-- adjusting for margin */
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
I'm using this on a WordPress project, where I have to list articles by categories, nested in columns. I just wrote some css for the responsive layout, so as you decrease the browser width, there are less elements in a row.
.container {
margin: 20px auto;
width: 80%;
min-height: 100px;
display: flex;
flex-flow: row wrap;
}
.item {
margin: 10px;
flex: 1 1 calc(20% - 20px);
background-color: lightgreen;
}
@media screen and (max-width: 1200px) {
.item {
flex: 1 1 calc(25% - 20px)
}
}
@media screen and (max-width: 900px) {
.item {
flex: 1 1 calc(33% - 20px)
}
}
@media screen and (max-width: 750px) {
.item {
flex: 1 1 calc(50% - 20px)
}
}
@media screen and (max-width: 550px) {
.item {
flex: 1 1 calc(100% - 20px)
}
}
<div class="container">
<div class="item"><a>Link1</a></div>
<div class="item"><a>Link1</a></br><a>Link2</a></div>
<div class="item"><a>Link1</a></br><a>Link2</a></br><a>Link3</a></div>
<div class="item"><a>Link1</a></br><a>Link2</a></br><a>Link3</a></br><a>Link4</a></div>
<div class="item"><a>Link1</a></br><a>Link2</a></br><a>Link3</a></br><a>Link4</a></br><a>Link5</a></div>
<div class="item"><a>Link1</a></br><a>Link2</a></br><a>Link3</a></br><a>Link4</a></br><a>Link5</a></br><a>Link6</a></div>
</div>
try below css for five items in each row.
.container {
background: gray none repeat scroll 0 0;
display: flex;
flex-flow: row wrap;
position: relative;
width: auto;
}
.item {
background: blue none repeat scroll 0 0;
flex: 1 1 18%;
height: auto;
margin: 4px;
padding: 20px 0;
width: auto;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>