"align-items: flex-start" richtet Kinder nach dem verfügbaren Platz des Elternteils aus

Question

Ich versuche, jedes Kind DIREKT hintereinander (vertikal) auszurichten. Offensichtlich macht align-items: flex-start das nicht vollständig, da zwischen jedem Kind ein automatischer Abstand besteht.

Unten ist ein Ausschnitt des Ergebnisses, das ich bekomme. Die Kinder richten sich nach dem verfügbaren Platz ihrer Eltern aus, was ich nicht gerne erreiche. Was ich will ist, dass jedes Kind direkt nach seinem vorherigen Geschwister ausgerichtet wird (vertikal, wie im Schnipsel).

Vielen Dank im Voraus!

EDIT: flex-flow: column wrap und align-content: flex-start beide taten den Trick. Ich habe jedoch vergessen, dem letzten Kind align-self: flex-end hinzuzufügen, was nicht funktioniert, wenn eine der beiden obigen Lösungen angewendet wird.

* { 
 
    box-sizing: border-box; 
 
} 
 

 
#container { 
 
    position: fixed; 
 
    top: 0; right: 0; bottom: 0; left: 0; 
 
    display: flex; 
 
    align-items: flex-start; 
 
    flex-flow: row wrap; 
 
} 
 
#container > div { 
 
    width: 100%; 
 
    margin: 10px; 
 
    border: 2px solid #ff0000; 
 
} 
 
#container > div:nth-child(1) { height: 5%; } 
 
#container > div:nth-child(2) { height: 10%; } 
 
#container > div:nth-child(3) { height: 20%; align-self: flex-end; }

<div id="container"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

Answer 1

Sie müssen align-content: flex-start für das übergeordnete Element festlegen, da der Anfangswert stretch ist.

stretch

Wenn die kombinierte Größe der Elemente entlang der Querachse kleiner als die Größe des Ausrichtungsbehälters ist, jede Auto-sized Produkte haben ihre Größe gleich zu (nicht proportional), während Beachten Sie weiterhin die Einschränkungen, die von der maximalen Höhe/maximalen Breite (oder einer äquivalenten Funktionalität) auferlegt werden, sodass die kombinierte Größe den Ausrichtungscontainer genau entlang der Querachse ausfüllt.

* { 
 
    box-sizing: border-box; 
 
} 
 
#container { 
 
    position: fixed; 
 
    top: 0; right: 0; bottom: 0; left: 0; 
 
    display: flex; 
 
    align-items: flex-start; 
 
    flex-flow: row wrap; 
 
    align-content: flex-start; 
 
} 
 
#container > div { 
 
    width: 100%; 
 
    margin: 10px; 
 
    border: 2px solid #ff0000; 
 
} 
 
#container > div:nth-child(1) { height: 5%; } 
 
#container > div:nth-child(2) { height: 10%; } 
 
#container > div:nth-child(3) { height: 20%; }

<div id="container"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

Update: Eine andere Lösung ist flex-direction: column zu setzen, dann können Sie margin verwenden spezifische flex Element zu positionieren.

* { 
 
    box-sizing: border-box; 
 
} 
 
#container { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
#container > div { 
 
    width: calc(100% - 20px); 
 
    margin: 10px; 
 
    border: 2px solid #ff0000; 
 
} 
 
#container > div:nth-child(1) { 
 
    height: 5%; 
 
} 
 
#container > div:nth-child(2) { 
 
    height: 10%; 
 
} 
 
#container > div:nth-child(3) { 
 
    height: 20%; 
 
    margin-top: auto; 
 
}

<div id="container"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

Answer 2

Sie müssen Spalte setzen für den Fluss

#container { 
    position: fixed; 
    top: 0; right: 0; bottom: 0; left: 0; 
    display: flex; 
    align-items: flex-start; 
    flex-flow: column wrap; 
} 
#container > div:nth-child(3) { height: 20%; margin-top: auto; } 

Aktualisiert:

hinzufügen Marge Top-Auto auf das letzte Kind

https://jsfiddle.net/qghsgze5/2/