Flexbox行:如何拉伸儿童填充横轴？

Question

我有一个左右的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>

问题是,正确的孩子没有表现出反应.具体来说,我希望它填充包装器的高度.怎么做到这一点？

Answer 1

• row-flexbox容器的子项自动填充容器的垂直空间.

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

Answer 2

简短的回答：只使用flex:1;for child

.wrapper {
    display: flex;
    flex-direction: row;
    .
    .
    .
}
.wrapper > * {
    flex: 1;
}

请记住，通常不能将width: ... 和flex:1;一起用于单个子项。