如何使用flexbox填充垂直空间？

Question

如果.right项目的高度拉伸到任意大小，如何在.item内.left个元素同等地填充垂直空间？

自：

要：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

弹性容器的初始设置为align-content: stretch。

这意味着弹性线将平均分配cross axis中容器中的所有可用空间。 （与主轴上所有项目的flex: 1类似的效果。）

但是，当横轴垂直或宽度时，为展示项目定义高度，当横轴为水平时定义的高度，则覆盖{{ 1}}默认。

在行方向容器中，横轴是垂直的。因此，如果您删除align-content，则height: 100%可以使用。

在此处了解有关十字轴上的柔性对齐的详情：

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

在此处了解有关主轴上的柔性对齐的更多信息：

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

align-content: stretch

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

Answer 2

从height: 100%

中删除了.left

＆＃13;

＆＃13;

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

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;