Question

有没有办法在flexbox中拥有相同高度的项目，并将该容器中的所有内容与底部对齐？

目前这就是我所拥有的

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

是的，但由于您在容器上没有指定的高度，因此默认为height: auto（内容高度），并且没有可用空间向下移动。

一旦您定义了允许额外空间的高度，项目就可以在容器上向下移动align-items: flex-end，或在项目上向align-self: flex-end移动（就像您一样）。

将Flex容器中的内容与底部对齐

1 个答案: