Inhalt passendes div vertikal

Question

Ich frage mich, ob der Inhalt automatisch vertikal in einen Container passt (vorzugsweise mit CSS, aber andere Vorschläge sind willkommen). Also, zum Beispiel, ähnlich dem gleichen oberen/unteren Abstand (Padding/Rand) zwischen einem Gegenstand (in meinem Fall ein , gefolgt von verschiedenen Text-Tags) innerhalb eines div. Das Ziel wäre, dass sich der Inhalt anmutig dehnt, um in den Container zu passen.

Ich habe mich umgesehen, aber habe keine vernünftige Lösung gefunden, oder irgendwelche neuen Fragen dazu (obwohl zugegebenermaßen hätte ich härter suchen können). Dank

Per Louie Almeda Vorschlag, hier ist eine Darstellung:

Answer 1

Ich (und viele andere Leute) würde Flexbox befürworten. Lesen Sie es auf here.

Leider hat flexbox derzeit keine Möglichkeit, seine Kinder gleichmäßig zu verteilen. space-between Platziert sie so weit wie möglich und space-around Räume sie so wenig wie möglich aus.

Was macht Arbeit genauso gut ist die Kinder flex-grow: 1, auch die Kinder flexboxes und dann zentrieren Ausrichtung was auch immer in denen ist.

<div id="container"> 
    <div class="cell"> 
    <div class="stuff"> 
     <h3>asdf</h3> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     </p> 
    </div> 
    </div> 
    <div class="cell"> 
    <div class="stuff"> 
     <h3>asdf</h3> 
    </div> 
    </div> 
    <div class="cell"> 
    <div class="stuff"> 
     <h3>asdf</h3> 
    </div> 
    </div> 
</div> 

#container { 
    background: red; 
    display: flex; 
    flex-direction: column; 
    height: 500px; 
} 

.cell { 
    margin: 10px; 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
} 

.stuff { 
    background: green; 
} 

https://jsfiddle.net/w8s4zazk/

Answer 2

Hier ist eine CSS Flexbox Lösung:

HTML

<div class="Aligner"> 
    <div class="Aligner-item image-wrapper">inner1</div> 
    <div class="Aligner-item text-wrapper">inner2</div> 
    <div class="Aligner-item text-wrapper">inner3</div> 
</div> 

CSS

.Aligner { 
    flex-direction: column; 
    display: flex; 
    height: 500px; 
    align-items: center; 
    justify-content: space-around; 
} 


.Aligner-item { 
    display: flex; 
    border: 1px solid #333; 
    width: 300px; 
    justify-content: center; 
    align-items: center; 
} 

.image-wrapper{ 
    height: 200px; 
} 

.text-wrapper{ 
    height: 100px; 
} 

Answer 3

Wenn Sie Gitter verwenden, verwenden Raum gleichmäßig ist etwas anders zu Raum um und Raum dazwischen. Ich bevorzuge den Raum gleichmäßig.