html - 如何用 flexbox 填充垂直空间？

Question

如果 .right 元素拉伸(stretch)高度到任意大小，如何使 .left 内的 .item 元素平均填充垂直空间？

来自:

收件人:

.container {
  display: flex;
  background: #ccc;
}

.left {
  flex: 2;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  height: 100%;
}

.right {
  flex: 1;
  border: 1px solid #000;
}

.item {
  border: 1px solid #000;
  flex: 1 0 100%;
  align-self: stretch;
}

<div class="container">
  <div class="left">
    <div class="item">
      Item 1
    </div>
    <div class="item">
      Item 2
    </div>
  </div>
  <div class="right">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

https://jsfiddle.net/d7o58kaj/1/

Answer 1

flex 容器的初始设置是 align-content: stretch .

这意味着 flex 行将沿 cross axis 平均共享容器中的所有可用空间。 . (对主轴上所有元素的 flex: 1 类似效果。)

但是，当您为 flex 元素定义高度时当横轴为垂直时，或宽度当横轴为水平时，您将覆盖对齐内容默认。

在您的行方向容器中，横轴是垂直的。因此，如果您删除 height: 100%，那么 align-content: stretch 将起作用。

在此处了解有关横轴的 flex 对齐的更多信息:

• How does flex-wrap work with align-self, align-items and align-content?

在此处了解有关主轴的 flex 对齐的更多信息:

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

.container {
  display: flex;
  background: #ccc;
}

.left {
  flex: 2;
  display: flex;
  flex-wrap: wrap;      /* <--- this brings align-content into play */
  /* flex-direction: row;  <--- default setting; can be omitted */
  /* align-items: stretch; <--- default setting; can be omitted */
  /* height: 100%; */
}

.right {
  flex: 1;
  border: 1px solid #000;
}

.item {
  border: 1px solid #000;
  flex: 1 0 100%;
  align-self: stretch;
}

<div class="container">
  <div class="left">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
  </div>
  <div class="right">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>