flex 的“align-items:flex-end”是否會導致 flex-wrapped 盒子內的固定高度 div 根據每個盒子的最高盒子垂直對齊？

Question

在做一個相當基本的 HTML 頁面時，我發現自己對 CSS 中 flex 的以下問題感到困惑。

首先假設以下配置：

• 一個帶有display: flex和應用justify-content: space-evenly的 div 包裝器，包含三個內部框（可以或多或少）每個也使用 flex （應用flex-wrap: wrap和align-items: end ）。
• 這些內部盒子中的每一個依次包含兩個 div 元素：一個頂部元素和一個底部元素（每個元素的width: 100% ）； 每個盒子的底部元素具有相同的高度，而頂部元素具有不同的高度； 它們都是以像素為單位的固定高度。

此配置在 HTML 中看起來或多或少像這樣：

<div class="wrapper">
  <div class="box">
    <div class="top-element one"></div>
    <div class="bottom-element one"></div>
  </div>
  <div class="box">
    <div class="top-element two"></div>
    <div class="bottom-element two"></div>
  </div>
  <div class="box">
    <div class="top-element three"></div>
    <div class="bottom-element three"></div>
  </div>
</div>

這是 CSS（用 SCSS 編寫以節省空間，我將在下面包含一個片段，如果您願意，您可以在其中查看編譯后的 CSS）； 注釋行：“align-content: flex-end”表示我已經評估了這個屬性的效果。

.wrapper {
  display: flex;
  justify-content: space-evenly;

  .box {
    display: flex;
    align-items: flex-end;
    // align-content: flex-end;
    flex-wrap: wrap;
    width: 30%;

    .top-element {
      width: 100%;
      background-color: teal;

      &.one {
        height: 200px;
      }

      &.two {
        height: 300px;
      }

      &.three {
        height: 100px;
      }
    }

    .bottom-element {
      width: 100%;
      background-color: lightblue;

      &.one {
        height: 100px;
      }

      &.two {
        height: 100px;
      }

      &.three {
        height: 100px;
      }
    }
  }
}

這是片段。

 .wrapper { display: flex; justify-content: space-evenly; }.wrapper.box { display: flex; align-items: flex-end; flex-wrap: wrap; width: 30%; }.wrapper.box.top-element { width: 100%; background-color: teal; }.wrapper.box.top-element.one { height: 200px; }.wrapper.box.top-element.two { height: 300px; }.wrapper.box.top-element.three { height: 100px; }.wrapper.box.bottom-element { width: 100%; background-color: lightblue; }.wrapper.box.bottom-element.one { height: 100px; }.wrapper.box.bottom-element.two { height: 100px; }.wrapper.box.bottom-element.three { height: 100px; }

 <div class="wrapper"> <div class="box"> <div class="top-element one"></div> <div class="bottom-element one"></div> </div> <div class="box"> <div class="top-element two"></div> <div class="bottom-element two"></div> </div> <div class="box"> <div class="top-element three"></div> <div class="bottom-element three"></div> </div> </div>

問題是：如果你改變任何內部盒子上任何頂部元素的高度都沒關系，這些元素根據所有盒子中最高的元素保持垂直居中對齊，而底部元素保持在底部，並且每個盒子頂部和底部元素之間的空間按比例保持。

現在的問題是： css 是否正確？ 如果是這樣，我懷疑每個盒子上的 align-items:"end" 是造成這個結果的罪魁禍首，對嗎？ 如果我錯了，那為什么會這樣呢？

為什么我不使用網格？ 好吧，我正處於彈性階段……請耐心等待。

Answer 1

您忘記為帶有 CSS .box的元素定義垂直彎曲主方向。

將這些元素的 CSS 屬性的flex-direction值設置為column可以解決您的問題。

SCSS

.box {
    display: flex;
    flex-direction: column;
    ...