将弹性容器中的内容对齐到底部 [英] Align content in a flex container to the bottom
本文介绍了将弹性容器中的内容对齐到底部的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
是否有办法在flexbox中具有相等高度的项目并使该容器中的所有内容与底部对齐?
Is there a way to have equal height items in flexbox and align all of the content within that container to the bottom?
目前这就是我所拥有的
.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>
推荐答案
是的,但是由于您在容器上没有指定高度,因此默认值为height: auto
(内容高度),并且没有可用空间下移.
Yes, but since you don't have a specified height on the container, it defaults to height: auto
(content height), and there's no free space to move down.
一旦定义了允许额外空间的高度,物品就可以在容器上按align-items: flex-end
向下移动,或者在物品上按align-self: flex-end
向下移动(如您所愿).
Once you define a height which allows for extra space, the items can move down with align-items: flex-end
on the container, or align-self: flex-end
on the items (like you have).
这篇关于将弹性容器中的内容对齐到底部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文