Flexbox Elemente horizontal ausrichten

Question

Gibt es eine Methode, um untergeordnete Elemente auf diese Weise auszurichten: [i] [i] ______ [i] [i] [i], unabhängig von der Anzahl der Elemente in jeder Gruppe?

Answer 1

In einem Container Flexbox

• Verwendung justify-content für die Ausrichtung der Elemente horizontal.
• Mit align-items Elemente vertikal ausrichten.

Haben Sie einen Blick auf das folgende Beispiel-Snippet:

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

hoffe, das hilft!

Answer 2

put linke und rechtes Kind in einem div und gibt links und rechts auf diese Weise

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

und gibt diese 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; 
}