Html 弹性方向上的等高行：列

Equal height rows in flex-direction: column

提问by Andrei V

I have a flex layout with two flex items, displayed as rows (flex-direction: column). The items should have a minimum height but they should maintain the same height it one of them needs to grow. See this fiddleand decrease the width of the result pane; this forces the second .componentelement to increase its height, but the height of the first .componentelement remains the same.

我有一个包含两个 flex 项目的 flex 布局，显示为行 ( flex-direction: column)。这些物品应该有一个最小高度，但它们应该保持与其中一个需要生长的高度相同。请参阅此小提琴并减小结果窗格的宽度；这会强制第二个.component元素增加其高度，但第一个.component元素的高度保持不变。

Is it possible to force the flex items to maintain the same height? Please note that the main thing in this is the stacking of the two .componentelements, which I couldn't achieve without flex-direction: column; flex-direction: rowwould have made the same height possible but the stacking does not work.

是否可以强制 flex 项目保持相同的高度？请注意，这里的主要内容是两个.component元素的堆叠，没有flex-direction: column; flex-direction: row本来可以使相同的高度成为可能，但堆叠不起作用。

Here is the result of what I have so far:

这是我到目前为止的结果：

div {
  border: 1px solid black;
  box-sizing: border-box;
}
.container {
  display: flex;
  flex-direction: column;
  align-content: stretch;
}
.component {
  min-height: 300px;
}
.left {
  margin-left: 50px;
  margin-top: 50px;
  margin-right: 100px;
  background-color: lightyellow;
}
.right {
  margin-left: 100px;
  margin-top: -250px;
  margin-right: 50px;
  background-color: lightgreen;
}

<div class="container">
  <div class="component left">

  </div>
  <div class="component right">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed orci scelerisque, scelerisque enim at, ullamcorper ipsum. Cras eget sapien mi. Aliquam ultrices, ligula ut mollis maximus, ligula massa imperdiet libero, at faucibus mauris ante non
      magna. Sed ex lacus, efficitur sit amet neque ut, venenatis hendrerit libero. Suspendisse ornare orci mi. Nulla iaculis egestas libero, eu tincidunt urna tristique et. Quisque nec odio non elit molestie facilisis.
    </p>
    <p>
      Vestibulum scelerisque justo urna, a semper nisi sollicitudin in. Cras congue enim eu euismod semper. Proin consequat gravida felis, quis tincidunt massa pulvinar quis. Morbi nec diam eget orci vestibulum malesuada. Sed volutpat metus eget mattis commodo.
      Nulla facilisi. Praesent lectus mauris, consequat eu varius vitae, cursus vitae leo. Vivamus sagittis lacinia tortor eu ullamcorper. Integer eget velit magna. Duis vestibulum molestie posuere.
    </p>

  </div>
</div>

采纳答案by Michael Benjamin

The flex equal height columns feature – which is the result of align-items: stretch, a default setting of a flex container – applies only to flex items on the same row.

flex 等高列特性——这是align-items: stretchflex 容器的默认设置的结果——仅适用于同一行上的 flex 项目。

It doesn't work for items in a multi-line flex container. This behavior is defined in the spec:

它不适用于多行 flex 容器中的项目。此行为在规范中定义：

6. Flex Lines

In a multi-line flex container (even one with only a single line), the cross size of each line is the minimum size necessary to contain the flex items on the line (after alignment due to align-self), and the lines are aligned within the flex container with the align-contentproperty.

6. 弹性线

在多行 flex 容器（即使只有一行）中，每行的交叉大小是包含行上的 flex 项目所需的最小大小（由于 对齐后align-self），并且行在具有align-content属性的flex 容器。

In other words, when there are multiple lines in a row-based flex container, the height of each line (the "cross size") is the "minimum size necessary to contain the flex items on the line".

换句话说，当基于行的弹性容器中有多行时，每行的高度（“交叉尺寸”）是“包含行上弹性项目所需的最小尺寸”。

In addition, because align-items: stretchworks along the cross-axis, the equal height columns feature is useless in flex-direction: column, where the cross-axis is horizontal.

另外，因为align-items: stretch是沿着横轴工作，所以等高列特征在flex-direction: column横轴是水平的情况下是没有用的。

To achieve equal height columns/rows across multiple lines consider a Javascript solution.

要在多行中实现等高的列/行，请考虑使用 Javascript 解决方案。

---

---

However, without knowing much about your overall objective, here's a simple way to achieve equal height rows in your current layout:

但是，在不太了解您的总体目标的情况下，这里有一种在当前布局中实现等高行的简单方法：

Add duplicate content in both divs. In the .component.leftdiv, use visibility: hidden.

在两个 div 中添加重复的内容。在.component.leftdiv 中，使用visibility: hidden.

Revised Fiddle

修正小提琴

回答by HymanHasaKeyboard

You can just wrap those flexbox columns in another flexbox that's a row, there's no reason you can't have items be both flexboxes and flex items.

您可以将这些 flexbox 列包装在另一个 flexbox 中，这是一行，没有理由不能让项目既是 flexboxes 又是 flex 项目。

<div id="container">
  <div class="col">
    <a href="">asdf</a>
    <a href="">asdf</a>
    <a href="">asdf</a>
  </div>
  <div class="col">
    <a href="">asdf</a>
    <a href="">asdf</a>
    <a href="">asdf</a>
  </div>
</div>

#container {
  display: flex;
}

#container .col {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background: grey;
}

https://jsfiddle.net/1dp87bm2/1/

https://jsfiddle.net/1dp87bm2/1/