代码之家 › 专栏 › 技术社区 › Andrei V

弯曲方向的等高行:列

flexbox css html

Andrei V · 技术社区 · 10 年前

我有一个带有两个flex项的flex布局,显示为行( flex-direction: column ). 项目应具有最小高度,但应保持其中一个项目增长所需的高度。看见 this JSFiddle 并减小结果窗格的宽度;这迫使第二个 .component 元素以增加其高度,但第一个元素的高度 组成部分 元素保持不变。

是否可以强制弹性项目保持相同高度?请注意,这里的主要内容是两个 组成部分 没有这些元素,我无法实现 弯曲方向:柱 ; 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>

2 回复 | 直到 6 年前

Michael Benjamin William Falcon 10 年前

弹性等高柱功能–这是 align-items: stretch ,flex容器的默认设置–仅适用于同一行上的flex项。

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

6. Flex Lines

在多线柔性容器(即使只有一条线)中每行的交叉大小是包含调整行上的项目(由于 align-self )、和线在flex容器内与 align-content 所有物

换句话说,当基于行的flex容器中有多行时,每行的高度( “交叉尺寸” )是 “包含行上弹性项目所需的最小大小” .

此外,因为 对齐项目:拉伸 沿十字轴工作,等高柱功能在 flex-direction: column ,其中横轴是水平的。

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

然而,在不太了解总体目标的情况下,以下是在当前布局中实现等高行的简单方法:

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

Revised Fiddle

TylerH Ash Burlaczenko 6 年前

您可以将这些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/