Flex 3 columns with space between

Question

I'd like to have a container with dynamic width that will always have 3 columns per row, first column stick to the left, second column in the center of the entire row and third column stick to the right. Is there an automatic way to achieve this?

<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

|x     x     x|
|x     x     x|
|x            |

I was trying

display: flex;
flex-wrap: wrap;
justify-content: space-between;

and for items

flex: 1 0 30%

but the 30% makes the items wider like:

|x   x   x   |

Santosh · Answer 1 · 2020-02-28T16:19:36.207

2

You can use justify-content: space-between; inorder to make it like that.

.container { display: flex; flex-wrap: wrap;  flex: 0 0 30%; justify-content:space-between;} 
.box {background: #efefef; width: 30%; border:1px solid #fff; height: 150px; }

    
    <div class="container">
        <div class="box box_1">Box 1</div>
        <div class="box box_2">Box 2</div>
        <div class="box box_3">Box 3</div>
        <div class="box box_1">Box 1</div>
        <div class="box box_2">Box 2</div>
        <div class="box box_3">Box 3</div>
    </div>

edited Feb 28 '20 at 16:19

answered Feb 28 '20 at 16:18

Santosh

3,477
5
37
75

I edited my post - inside container there is a lot more divs, not three – elzoy Feb 28 '20 at 16:18
I have updated my answer too. Please check. – Santosh Feb 28 '20 at 16:20

Jeremy Harris · Answer 2 · 2020-02-28T17:45:53.093

0

I guess if you know there will ALWAYS be 3 columns, you could just use align-items on the column to position flex-start, center, and flex-end.

.row {
   display: flex;
   flex-direction: row;
}

.col {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   border: 1px solid deeppink;
}

.col:nth-child(1) {
   align-items: flex-start;
}
.col:nth-child(2) {
   align-items: center;
}
.col:nth-child(3) {
   align-items: flex-end;
}

<div class="row">
   <div class="col">COLUMN</div>
   <div class="col">COLUMN</div>
   <div class="col">COLUMN</div>
</div>
<div class="row">
   <div class="col">COLUMN</div>
   <div class="col">COLUMN</div>
   <div class="col">COLUMN</div>
</div>
<div class="row">
   <div class="col">COLUMN</div>
   <div class="col">COLUMN</div>
   <div class="col">COLUMN</div>
</div>

edited Feb 28 '20 at 17:45

answered Feb 28 '20 at 16:18

Jeremy Harris

24,318
13
79
133

Try with 6 or 9 columns instead of 3. – j08691 Feb 28 '20 at 16:21
The question says `will always have 3 columns per row`... – Jeremy Harris Feb 28 '20 at 16:22
1

Right, so add another row with three more columns – j08691 Feb 28 '20 at 16:31
Ok, I added more rows.... – Jeremy Harris Feb 28 '20 at 17:46

Flex 3 columns with space between

2 Answers2