Flexbox layout: how to set every item same width in multi rows?

Question

Here is my test demo in codepen. I hope to keep the same margin between items, so I use flex-grow: 1 to fill the over width.

However, the items of last row seems not keep the same width as previous rows. How to do it?

.row{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
 }
.col{
  min-width: 160px;
  flex-grow: 1;
  margin: 10px 10px;
  background:#eee;
  height: 120px;
}

This is what I want, addon use flex-grow to keep the same margin

score 2 · Answer 1 · answered Mar 12 '19 at 11:52

2

You can use calc to set the width or flex-basis property to calc(33.33% - 30px) so that it adjusts for the right and left margins you have applied to the col - see demo below:

.row{
  display: flex;
  flex-wrap: wrap;
  background: red;
}
.col{
  flex-basis: calc(33.33% - 30px);
  margin: 10px 15px;
  background:#eee;
  height: 120px;
}

<div class="row">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
</div>

answered Mar 12 '19 at 11:52

kukkuz

41,512
6
59
95

1

thanks, but now the every row is limit to only 3 columns, is posible dynamic set by min-width=160px – dyh333 Mar 12 '19 at 12:32
but if you have `min-width` in smaller screens it will break this layout... – kukkuz Mar 12 '19 at 13:26

score 1 · Answer 2 · answered Mar 12 '19 at 11:48

1

I hope following code may solve your problem.

.row{
  display: flex;
  flex-wrap: wrap;
  background: red;
}
.col{
  flex: 1;
  min-width: calc(33.33% - 30px);
  max-width: calc(33.33% - 30px);
  margin: 10px 15px;
  background:#eee;
  height: 120px;
}

<div class="row">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
</div>

answered Mar 12 '19 at 11:48

Shubham

285
2
15

thanks, but now the every row is limit to only 3 columns, is posible dynamic set by min-width=160px – dyh333 Mar 12 '19 at 12:33

Mahdi Aslami Khavari · Answer 3 · 2019-03-12T11:48:43.967

your min-width can pull div to next row and i decrease it.

and you must use flex on columns and flex-direction on row

something like this:

.row{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex-direction: row;
 }
.col{
  min-width: 20px;
 flex-grow: 1;
  margin: 10px 10px;
background:#eee;
 height: 120px;
 flex: 1;
}

<div class="row">
<div class="col">
a
</div>
<div class="col">
b
</div>
<div class="col">
c
</div>
</div>

.row{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex-direction: row;
 }
.col{
  min-width: 200px;
 flex-grow: 1;
  margin: 10px 10px;
background:#eee;
 height: 120px;
 flex: 1;
}

<div class="row">
<div class="col">
a
</div>
<div class="col">
b
</div>
<div class="col">
c
</div>
<div class="col">
b
</div>
<div class="col">
c
</div>
</div>

.row{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  flex-direction: row;
 }
.col{
  width: 200px;
 
  margin: 10px 10px;
background:#eee;
 height: 120px;
}

<div class="row">
<div class="col">
a
</div>
<div class="col">
b
</div>
<div class="col">
c
</div>
<div class="col">
b
</div>
<div class="col">
c
</div>
</div>

thanks, but the items is much that can not put in one row... I had update details in question — dyh333, Mar 12 '19 at 11:41
it's automatically will go to next row but if you want to be in one row you must remove min-width. — Mahdi Aslami Khavari, Mar 12 '19 at 11:43
the min-width is need, and auto goto next row is ok. but i hope items keep same width — dyh333, Mar 12 '19 at 11:46

Flexbox layout: how to set every item same width in multi rows?

3 Answers3