如何拉伸孩子以填充横轴？

141

我有一个左右Flexbox：

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 70vh;
  min-height: 325px; 
  max-height:570px; 
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

展开摘要

问题在于正确的孩子没有做出反应。具体来说，我希望它填充包装纸的高度。

如何做到这一点？

css flexbox

— 黛博拉·科尔
source

它确实填满了包装纸的高度！我在Chrome和Firefox中测试了它，没有问题。也许您已经简化了太多代码。您可以通过background-color为儿童设置或align-items: center在包装器中进行设置来进行测试。

— samad montazeri's

是的，出于某些原因，未在野生动物园中填充包装纸的高度... chrome和Firefox通过设置高度来很好地做到这一点：儿童中的'100％'

— Pencilcheck

175

行柔性框容器的子代会自动填充容器的垂直空间。
指定flex: 1;一个孩子是否要填充剩余的水平空间：

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > .left
{
  background: #fcc;
}
.wrapper > .right
{
  background: #ccf;
  flex: 1; 
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

展开摘要

flex: 1;为两个孩子指定是否要填充相等数量的水平空间：

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > div 
{
  flex: 1; 
}
.wrapper > .left
{
  background: #fcc;
}
.wrapper > .right
{
  background: #ccf;
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

展开摘要

— 亚历克斯·谢斯特罗夫
source

flex是一个速记属性flex-grow，flex-shrink和flex-basis。flex: 1;等同于flex-grow: 1;。

— 罗里·奥肯

似乎align-items: stretch;不需要

— Matt