Элементы Flexbox выравниваются по горизонтали

Question

Есть ли способ выровнять дочерние элементы таким образом: [i] [i] ______ [i] [i] [i], независимо от количества элементов в каждой из групп?

Answer 1

В Flexbox Контейнер

• Использование justify-content для выравнивания элементов по горизонтали .
• Используйте align-items для выравнивания предметов по вертикали.

Взгляни на примере фрагмента кода ниже:

.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>

Надеется, что это помогает!

Answer 2

положить левый и правый ребенок в одном DIV и дать влево и вправо таким образом

<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> 

и дать этот 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; 
}