Inhalt in einem Flex-Container nach unten ausrichten

Question

Gibt es eine Möglichkeit, Elemente mit gleicher Höhe in der flexbox zu haben und den gesamten Inhalt innerhalb dieses Containers nach unten auszurichten?

Zur Zeit ist das, was ich

.quick-menu .menu { 
 
    font-size: 0; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
} 
 
.quick-menu .menu .item { 
 
    margin-top: 30px; 
 
    width: 33.33%; 
 
    align-self: flex-end; 
 
} 
 
.quick-menu .menu .item > img { 
 
    margin: auto; 
 
} 
 
.quick-menu .menu .item > span { 
 
    font-size: 24px; 
 
    font-weight: $bold; 
 
    color: $white; 
 
    text-align: center; 
 
    display: block; 
 
}

<div class="menu"> 
 
    <div class="item"> 
 
    <img src="/assets/img/menu/sandwiches.png" alt="Frozen Igloo Sandwiches"> 
 
    <span>Sandwiches</span> 
 
    </div> 
 
    <div class="item"> 
 
    <img src="/assets/img/menu/frozen-custard.png" alt="Frozen Igloo Frozen Custard"> 
 
    <span>Frozen Custard</span> 
 
    </div> 
 
    <div class="item"> 
 
    <img src="/assets/img/menu/munchies.png" alt="Frozen Igloo Munchies"> 
 
    <span>Munchies</span> 
 
    </div> 
 
    <div class="item"> 
 
    <span><img src="/assets/img/menu/handcrafted-treats.png" alt="Frozen Igloo Handcrafted Treats"> 
 
        <span>Handcrafted Treats</span> 
 
    </div> 
 
    <div class="item"> 
 
    <img src="/assets/img/menu/fountain-sodas.png" alt="Frozen Igloo Fountain Sodas"> 
 
    <span>Fountain Sodas</span> 
 
    </div> 
 
    <div class="item"> 
 
    <img src="/assets/img/menu/specialty-sundaes.png" alt="Frozen Igloo Specialty Sundaes"> 
 
    <span>Specialty Sundaes</span> 
 
    </div> 
 
</div>

Answer 1

Ja, aber da Sie eine bestimmte Höhe nicht auf dem Behälter haben, wird standardmäßig height: auto (Inhaltshöhe), und es gibt kein freier Platz zum Herunterfahren.

Sobald Sie eine Höhe definieren, die für zusätzlichen Platz zulässt, können die Elemente mit align-items: flex-end auf dem Behälter oder align-self: flex-end auf die Elemente nach unten zu verschieben (wie Sie).