Flexbox align-items stretch Ausgabe

Question

Ich habe einen 2-Säulen-Container. Auf der linken Seite befindet sich ein Bild. Auf der rechten Seite habe ich 2 <p> Elemente. Ich möchte ein <p> Element oben, das andere am Boden des Containers positionieren.

Ich habe versucht, flexblox, mit align-items zu strecken, aber das funktioniert nicht. Obwohl flex-start und flex-end funktioniert.

Ist das mit der flexbox überhaupt möglich?

.container { 
 
    display: flex; 
 
    align-items: stretch; 
 
} 
 
img { 
 
    display: block; 
 
    width: 100%; 
 
} 
 
.element-box { 
 
    height: 100%; 
 
}

<div class="container"> 
 
    <div> 
 
    <img src="https://placeimg.com/640/480/nature"> 
 
    </div> 
 
    <div class="element-box"> 
 
    <p>Should be on Top</p> 
 
    <p>Should be on Bottom</p> 
 
    </div> 
 
</div>

Answer 1

Sie können Ihre element-box eine Spalteflexbox und geben justify-content: space-between machen. Entfernen Sie auch height: 100% von ihm.

Siehe Demo unter:

.container { 
 
    display: flex; 
 
    align-items: stretch; 
 
} 
 
img { 
 
    display: block; 
 
    width: 100%; 
 
} 
 
.element-box { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
}

<div class="container"> 
 
    <div> 
 
    <img src="https://placeimg.com/640/480/nature"> 
 
    </div> 
 
    <div class="element-box"> 
 
    <p>Should be on Top</p> 
 
    <p>Should be on Bottom</p> 
 
    </div> 
 
</div>

Answer 2

Sie müssen flex für die zweite Behälter zu, wo Sie Sie haben <p> Elemente, schauen Sie bitte auf CSS unten, es wird Ihnen helfen:

.element-box { 
display: flex; 
flex-direction: column; 
justify-content: space-between; 
flex-grow: 1; 
}