Inhalt vertikal rechtfertigen

Question

Hoffentlich ist dies keine ungelöste Aufgabe, aber ich versuche, eine unbekannte (ish) Anzahl von divs innerhalb eines Containers vertikal zu rechtfertigen.

Jedes div sollte gleiche Abstände voneinander haben und zusätzlich den gleichen Abstand von den Kanten. (Angenommen, der letzte Teil kann mit Hilfe von Geisterelementen davor und danach ausgeführt werden)

Die divs füllen jeweils die Breite des Containers, und der Container hat eine festgelegte Höhe, aber die Anzahl der Elemente im Container ist unbekannt.

Ich gehe davon aus, dass es mit Flexbox zu einem gewissen Grad gemacht werden kann, aber in meinen bisherigen Versuchen nicht erfolgreich waren.

Answer 1

Wie immer, egal wie lange ich suche, finde ich die Antwort erst unmittelbar nachdem ich die Frage gestellt habe. : D

Für diejenigen neugierig, oder für meine eigene Zukunft Referenz: Flexbox die rechtfertigen nicht funktioniert, müssen Sie nur noch ein paar Optionen:

HTML:

<div id="outer-container"> 
    <div class="inner-element"></div> 
    <div class="inner-element"></div> 
    <div class="inner-element"></div> 
    <div class="inner-element"></div> 
    <div class="inner-element"></div> 
    <div class="inner-element"></div> 
    <div class="inner-element"></div> 
</div> 

CSS:

#outer-container { 
    height: 250px; 
    width: 200px; 
    background: red; 
    display: flex; 
    justify-content: space-around; 
    flex-direction: column; 
} 

.inner-element { 
    width: 200px; 
    height: 10px; 
    background: blue; 
} 

https://css-tricks.com/almanac/properties/j/justify-content/

https://jsfiddle.net/WW3bh/

Answer 2

Ja, Flexbox ist der einfachste Weg, es zu tun.

auf dem Behälterelement:

.container { 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
} 

auf das Kind-Elemente:

.container div { 
    flex: 1; 
    width: 100% 
} 

für den Abstand zwischen den Elementen, fügen nur Polsterung an den Behälter und unteren Ränder um die Kinder.

Der Stil würde wie folgt aussehen:

.container { 
    /* Same as above, and */ 
    padding: 20px; 
} 

.container div { 
    /* Same as above, and */ 
    margin-bottom: 20px; 
} 

.container div:last-of-type{ 
    margin-bottom: 0; 
    /* So that spacing is even at bottom and top of container */ 
} 

(ich dies eingeben, wenn Sie Ihre Antwort geschrieben, so dass ich es trotzdem up)

Fiddle