Flexbox-Artikel vertikal zentriert, während ein anderer Artikel an der linken unteren Ecke befestigt wird

Question

Wie kann ich die meta-Klasse in der unteren linken Ecke des Flex-Containers fixieren, während das Überschriftenelement h1 vertikal zentriert bleibt?

.container { 
 
    height: 200px; 
 
    background: red; 
 
    display: flex; 
 
    align-items: center; 
 
}

<div class="container"> 
 
    <h1>Hello, world!</h1> 
 
    <div class="meta">intro</div> 
 
</div>

Answer 1

es aus der Strömung und die Position relativ zum Container.

.container { 
 
    height: 200px; 
 
    background: red; 
 
    display: flex; 
 
    align-items: center; 
 
    position: relative; 
 
} 
 
.meta { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
}

<div class="container"> 
 
    <h1>Hello, world!</h1> 
 
    <div class="meta">intro</div> 
 
</div>

Answer 2

• Switch to flex-direction: column
• Bewerben justify-content: space-between
• Einfügen eines unsichtbaren "Spacer" Element zum Ausgleich beiden Enden

.container { 
 
    height: 200px; 
 
    background: red; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
} 
 

 
.invisible { visibility: hidden; }

<div class="container"> 
 
    <div class="invisible">intro</div> 
 
    <h1>Hello, world!</h1> 
 
    <div class="meta">intro</div> 
 
</div>

Beachten Sie, dass die Flex-Ausrichtungseigenschaften durch die Verteilung des verfügbaren Platzes im Container funktionieren. Dies bedeutet, dass justify-content: space-between das mittlere Element (h1) nur dann genau zentrieren kann, wenn beide benachbarten Elemente die gleiche Höhe haben. Für weitere Details siehe Box # 71 here.