html - 对齐项的限制 :stretch on flexbox?

Question

我正在尝试制作一个元素的 flex 盒网格，其中每行将拉伸(stretch)到与最高元素相同的高度。

但是，无论我尝试什么，要么最大元素的内容被推到外面并溢出，要么其他元素不会拉伸(stretch)。

我尝试了一个单独的盒子，它将是 display:flex 和主容器的 Flex 元素。并将其放入 wrapper 内。所以包装器是 flex 元素，包装器内的盒子是 display:flex

下面是我正在尝试做的事情的 Codepen。底部图像与顶部文本区域的比例为 50/50。

.flex-container {
  display: flex;
  max-width: 500px;
  flex-flow: row wrap;
  height: auto;
  align-items: stretch;
}

.flex-item {
  width: 100px;
  margin: 30px;
}

.item {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.upper {
  order: 1;
  flex: 0 0 50%;
  border: 1px solid red;
}

.lower {
  order: 2;
  flex: 0 0 50%;
  border: 1px solid blue;
  display: flex;
}

img {
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin-bottom: 0;
}

.flex-item2 {
  width: 100px;
  margin: 30px;
  display: flex;
  flex-direction: column;
}

<h1>Attempt 1</h1>
<div class="flex-container">
  <div class="flex-item">
    <div class="item">
      <div class="upper">
        <p>hello</p>
      </div>
      <div class="lower">
        <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
      </div>
    </div>
  </div>
  <div class="flex-item">
    <div class="item">
      <div class="upper">
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
      </div>
      <div class="lower">
        <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
      </div>
    </div>
  </div>
  <div class="flex-item">
    <div class="item">
      <div class="upper">
        <p>hello</p>
      </div>
      <div class="lower">
        <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
      </div>
    </div>
  </div>
  <div class="flex-item">
    <div class="item">
      <div class="upper">
        <p>hello</p>
      </div>
      <div class="lower">
        <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
      </div>
    </div>
  </div>
  <div class="flex-item">
    <div class="item">
      <div class="upper">
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
      </div>
      <div class="lower">
        <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
      </div>
    </div>
  </div>
  <div class="flex-item">
    <div class="item">
      <div class="upper">
        <p>hello</p>
      </div>
      <div class="lower">
        <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
      </div>
    </div>
  </div>
  <div class="flex-item">
    <div class="item">
      <div class="upper">
        <p>hello</p>
      </div>
      <div class="lower">
        <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
      </div>
    </div>
  </div>
  <div class="flex-item">
    <div class="item">
      <div class="upper">
        <p>hello</p>
      </div>
      <div class="lower">
        <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
      </div>
    </div>
  </div>
  <div class="flex-item">
    <div class="item">
      <div class="upper">
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
      </div>
      <div class="lower">
        <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
      </div>
    </div>
  </div>
  <div class="flex-item">
    <div class="item">
      <div class="upper">
        <p>hello</p>
      </div>
      <div class="lower">
        <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
      </div>
    </div>
  </div>
  <div class="flex-item">
    <div class="item">
      <div class="upper">
        <p>hello</p>
      </div>
      <div class="lower">
        <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
      </div>
    </div>
  </div>

</div>

<h1>Attempt 2</h1>
<div class="flex-container">
  <div class="flex-item2">
    <div class="upper">
      <p>hello</p>
    </div>
    <div class="lower">
      <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
    </div>
  </div>
  <div class="flex-item2">
    <div class="upper">
      <p>hello</p>
    </div>
    <div class="lower">
      <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
    </div>
  </div>
  <div class="flex-item2">
    <div class="upper">
      <p>hello</p>
      <p>hello</p>
      <p>hello</p>
      <p>hello</p>
      <p>hello</p>
      <p>hello</p>
    </div>
    <div class="lower">
      <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
    </div>
  </div>
  <div class="flex-item2">
    <div class="upper">
      <p>hello</p>
    </div>
    <div class="lower">
      <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
    </div>
  </div>
  <div class="flex-item2">
    <div class="upper">
      <p>hello</p>
      <p>hello</p>
      <p>hello</p>
      <p>hello</p>
      <p>hello</p>
    </div>
    <div class="lower">
      <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
    </div>
  </div>
  <div class="flex-item2">
    <div class="upper">
      <p>hello</p>
    </div>
    <div class="lower">
      <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
    </div>
  </div>
  <div class="flex-item2">
    <div class="upper">
      <p>hello</p>
    </div>
    <div class="lower">
      <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
    </div>
  </div>
  <div class="flex-item2">
    <div class="upper">
      <p>hello</p>
    </div>
    <div class="lower">
      <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
    </div>
  </div>



</div>

全笔

https://codepen.io/Richardadsmith/pen/GRRPQLy?editors=1100

Answer 1

我认为您偶然发现了 flex 布局的一个有趣问题。你的措辞完全正确(释义):

"What are the limits of align-items: stretch?"

根据您的示例，似乎存在一些限制:

根据 Chrome 的实验，我目前所处的位置是这样的:

1. 根据flexbox spec :

   In a multi-line flex container, the cross size of each line is the minimum size necessary to contain the flex items on the line.

   因此，在您的布局中，设置为 flex-wrap:wrap (使其成为多行)，您的要求:

   "I am trying to make a flexbox grid of items, where each row will stretch to be the same height as the tallest item."

   …应该满足。

   但事实并非如此。

   正如您所指出的:

   "... no matter what I seem to try either the content of the largest item is pushed outside and overflows, or the other items do not stretch."

---

我认为每行中的元素没有拉伸(stretch)到该行中最高元素的高度的原因与另一个 flex 函数有关:align-content:stretch。

此函数强制 Flex 容器创建 flex lines高度相等，限制每行中 flex 元素的增长。

但是更改 align-content 的值以及设置容器的高度和最小高度不会改变行为。对我来说，这似乎是一个非常明显的 align-items 限制。

---

您可能无法实现在多行容器 ( it's certainly possible in a single line container ) 中拉伸(stretch)到行中最高元素的高度的 flex 元素，但您可以使它们全部具有相同的高度，据我了解，这可能不适合您。

以下一些想法可能会让您更接近整体解决方案:

• 方法 #1: 从图像元素 ( demo ) 中删除 width: 100px。显然，这不是一个有用的解决方案，因为它允许图像扩展到其自然宽度。它只是为了识别问题区域。此外，它还说明了元素重叠行(伸缩线)，这支持 align-content 作为 align-items 约束的理论。

• 方法#2:在图像容器上启用flex-shrink。因此，不要使用 .lower { flex: 0 0 50% }，而是使用 flex: 0 1 50%。这允许容器适合行/伸缩线 ( demo )。

• 方法 #3: 将 overflow: auto 添加到 flex 元素 ( demo )。同样，可能没有用，但建立了等高的行。

---

最后，也许我在这里完全错过了一些东西，这将是个好消息，因为很高兴知道 flex 元素可以拉伸(stretch)到每行中最高元素的高度，如规范中所定义。祝你好运。

更多信息:

• Equal height rows in a flex container
• How does flex-wrap work with align-self, align-items and align-content?