如何拉伸 flex child 以填充容器的高度？答案

【问题标题】：How to stretch flex child to fill height of the container?如何拉伸 flex child 以填充容器的高度？
【发布时间】：2017-10-26 12:56:12
【问题描述】：

我需要拉伸黄色孩子以填充父母的所有高度。不设置父高度。父级的高度应取决于蓝色子文本。 https://jsfiddle.net/7vaequ1c/1/

<div style='display: flex'>
  <div style='background-color: yellow;height: 100%; width: 20px'>
  </div>
  <div style='background-color: blue'>
  some<br>
  cool<br>
  text
  </div>
</div>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

在使用 Flexbox 时，主要的错误是开始使用height: 100%。

在很多情况下，我们已经习惯了，但是当涉及到 Flexbox 时，它经常会破坏它。

解决方法很简单，只要去掉height: 100%，它就会自动生效。

这样做的原因是 flex item 在 row 方向（默认），align-items 控制垂直行为，默认为@987654324 @这只是按原样工作。

堆栈sn-p

<div style='display: flex'>
  <div style='background-color: yellow; width: 20px'>
  </div>
  <div style='background-color: blue'>
    some<br> cool<br> text
  </div>
</div>

【讨论】：

为什么添加height: 100% 会破坏它？
@cib 在这种情况下，height: 100% 可以工作，但实际上，孩子的父母需要一个明确的设置高度。现在，由于父级没有，Flexbox 行（方向）子级的 height 由align-items 控制，默认为stretch，它只会填充父级的高度。我的意思是它经常打破它，当上下都有孩子时，对中间的孩子使用 100% 不会考虑其他孩子，因此它可能会打破。
英雄。我是 100% 到处都是，删除它工作。
谢谢！

【解决方案2】：

如果我理解正确，您正在寻找 align-items 属性，它定义了沿横轴的布局，在本例中为垂直。

你可以在这里找到一个很好的概述：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.flexbox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch; // <-- stretch vertical (default value, can be omitted here)
  align-content: center;
}

.box {
    padding: 1em;
    text-align: center;
    margin: 1em;
}

.box--yellow {
  background-color: yellow;
}

.box--blue {
  background-color: blue;
  color: white;
}

<div class="flexbox">
  <div class="box box--yellow">
    yellow
  </div>
  <div class="box box--blue">
    some<br>
    cool<br>
    text
  </div>
</div>

【讨论】：

align-items: stretch; 是默认值，因此添加该 property:value 不会产生影响。
@LGSon 真的。我只是想指出负责拉伸的属性。显然我应该提到这是默认行为！

【解决方案3】：

删除

身高：100%；

而是做类似这个例子的事情：

<div style="display:flex; flex-direction:column">
<div style="flex-grow:1;"> Item 1 </div>
<div style="flex-grow:1;"> Item 2 </div>
</div>

上面的例子会告诉你你想要什么。

【讨论】：

【解决方案4】：

<div style='display: flex'>
  <div style='background-color: yellow; width: 20px'>

  </div>
  <div style='background-color: blue'>
    some<br>
    cool<br>
    text
  </div>
</div>

【讨论】：

就像@LGSon 说的。你的意思是 flex-grow: 可能是 ..developer.mozilla.org/en-US/docs/Web/CSS/flex-grow :)

【解决方案5】：

给你：

<div style='display: flex;'>
  <div style='background-color: yellow; flex: none auto; width: 20px'></div>
  <div style='background-color: blue'>
    some<br>
    cool<br>
    text
  </div>
</div>

【讨论】：

没有解释是一个不好的答案，你也有语法错误。我建议您在使用 Flexbox 回答问题之前阅读它。