將柔性容器中的內容與底部對齊

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（像你一樣）。