如何用flexbox填充垂直空间？

Question

如果.right项目拉伸高度为任何尺寸,如何使.item内部元素.left平均填充垂直空间？

从:

至:

.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: 1主轴上的所有项目类似的效果.)

但是,当横轴为垂直或宽度时定义弹性项目的高度,当横轴为水平时,将覆盖align-content默认值.

在行方向容器中,横轴是垂直的.所以,如果你删除height: 100%,那允许align-content: stretch工作.

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

• flex-wrap如何使用align-self,align-items和align-content？

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

• 在CSS Flexbox中,为什么没有"justify-items"和"justify-self"属性？

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