Flexbox align items horizontally

Question

Is there a method to align child items in that way: [i][i]______[i][i][i], regardless how many items are in each of the groups?

Saurav Rastogi · Answer 1 · 2016-11-13T10:22:44.507

18

In a Flexbox Container

Use justify-content for the alignment of items horizontally.
Use align-items to align items vertically.

Have a look at the example snippet below:

.parent {
  display: flex;
  width: 100%;
  height: 100px;
  align-items: center; /* Align Items Vertically */
  justify-content: space-between; /* Align Items Horizontally (with equal space in between each of them */
  background: #eee;
}

.children {
  display: flex;
}

.child {
  margin: 0 5px;
  padding: 0 5px;
  font-size: 30px;
  background: #ccc;
  color: #000;
}

<div class="parent">
  <div class="children left-children">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
  </div>
  <div class="children right-children">
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
  </div>
</div>

Hope this helps!

edited Nov 13 '16 at 10:22

answered Nov 13 '16 at 09:38

Saurav Rastogi

9,575
3
29
41

@DmitryMosquid Do you mean `[i][i]______[i][i][i]`, these should have space in between them? – Saurav Rastogi Nov 13 '16 at 10:04
Yes, I must work like float: left and float: right, but display flex is required.. – Nov 13 '16 at 10:16
@DmitryMosquid For achieving this you need to create 2 `.children` elements and put your `child` inside of it (with the right and left) & use `justify-content: space-between;` to separate both of them equally. FYI - Float property doesn't work with Flexbox. I've updated my answer, please have a look. And let me know if it helps! – Saurav Rastogi Nov 13 '16 at 10:25
Thank you so much for this. – ANUBIS Apr 03 '20 at 15:52
That’s my pleasure! – Saurav Rastogi Apr 04 '20 at 17:18

score 2 · Answer 2 · answered Nov 13 '16 at 09:53

put left and right child in one div and give left and right in this way

<div class="parent">
  <div class="left">
     <div class="child">1</div>
     <div class="child">2</div>
  </div>
  <div class="right">

    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
</div>

and give this css

.parent {
     display: flex;
  width: 100%;
  height: 100px;
  justify-content: space-between; /* Align Items Horizontally */
  background: #eee;
}

.child {
  margin: 0 5px;
  padding: 0 5px;
  font-size: 30px;
  background: #ccc;
  color: #000;
}

Flexbox align items horizontally

2 Answers2

Linked