フレックスコンテナの内容を一番下に整える

Question

フレックスボックスに等しい高さのアイテムを持ち、そのコンテナ内のすべてのコンテンツを一番下に並べる方法はありますか？

現在、これは私がはい

.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

を持っているものですが、コンテナに指定された高さを持っていないので、それはheight: auto（コンテンツの高さ）にデフォルト設定、およびがあります空きスペースがなくなりました。

余分なスペースを許す高さを定義すると、アイテムはコンテナにalign-items: flex-end、アイテムにはalign-self: flex-endで移動できます。