flex-direction 中等高的行：column答案

【问题标题】：Equal height rows in flex-direction: columnflex-direction 中等高的行：column
【发布时间】：2020-08-12 21:27:27
【问题描述】：

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

是否可以强制弹性项目保持相同的高度？请注意，这里的主要内容是两个.component 元素的堆叠，没有flex-direction: column 是我无法实现的； flex-direction: row 可以实现相同的高度，但堆叠不起作用。

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

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>

【问题讨论】：

我不完全确定您想要实现什么布局。您希望这两个组件以相同的高度并排放置，还是以相同的高度堆叠在一起？小提琴显示了对我来说重叠的两个组件。 ...所以你的意思是堆叠在一起吗？
@elfwyn 重叠的目的是并且是布局中最重要的部分。这就是我设置所有边距的原因。它们的最小高度均为300px。 .right 组件的高度会根据它的内容而改变。发生这种情况时，“.left”组件也应该改变它的大小。

标签： html css flexbox

【解决方案1】：

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

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

6. Flex Lines

在多行 flex 容器中（即使只有一行），每行的交叉大小是包含行上的弹性项目（由于align-self而对齐后），以及行在 flex 容器中与 align-content 对齐属性。

换句话说，当基于行的弹性容器中有多行时，每行的高度（“交叉大小”）是“包含所需的最小大小flex 项目就行了".

另外，由于align-items: stretch沿横轴工作，等高列功能在横轴为水平的flex-direction: column中无用。

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

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

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

Revised Fiddle

【讨论】：

感谢您的回答。尝试重叠列后，我忘记取出“对齐项目”规则。这可能是一个XY 问题。我应该说明所需的输出（重叠的孩子和内容感知容器），而不是询问如何解决 flexbox 问题。不过，您的回答为我的问题提供了解决方案。经过一番考虑，我放弃了 flexbox 并找到了使用伪元素的解决方案。需要提出正确的问题...

【解决方案2】：

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

#container {
  display: flex;
}

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

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

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

【讨论】：