Question

我有一个带有两个弹性项目的弹性布局，显示为行（flex-direction: column）。这些物品应具有最小高度，但它们应保持与其中一个物体需要生长的高度相同。请参阅this fiddle并减小结果窗格的宽度;这会强制第二个.component元素增加其高度，但第一个.component元素的高度保持不变。

是否可以强制柔性物品保持相同的高度？请注意，主要的是堆叠两个.component元素，如果没有flex-direction: column我无法实现这些元素。 flex-direction: row可能会使高度相同，但堆叠不起作用。

以下是我到目前为止的结果：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

弹性相等高度列功能 - 这是align-items: stretch（Flex容器的默认设置）的结果 - 仅适用于同一行上的弹性项目。

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

6. Flex Lines

在多线柔性容器（即使只有一条线的容器）中，   每行的交叉大小是包含该行所必需的最小大小   弹线上的项目（由于align-self对齐后）和   使用align-content在flex容器中对齐线条   属性。

换句话说，当基于行的Flex容器中有多行时，每行的高度（“交叉大小”）是“包含所需的最小大小“。

行上的弹性项目

此外，由于align-items: stretch沿着横轴工作，因此等高度列功能在flex-direction: column中无用，其中横轴是水平的。

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

然而，在不了解您的总体目标的情况下，这是在当前布局中实现相等高度行的简单方法：

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

Revised Fiddle

Answer 2

您可以将这些弹性箱列包装在另一个弹性箱中，这些弹出箱没有理由让您无法同时拥有柔性箱和弹性项目。

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

弯曲方向的相等高度行：列

2 个答案: