如何拉伸子填充横轴？

Question

我有一个左右flexbox：

 .wrapper { display: flex; flex-direction: row; align-items: stretch; width: 100%; height: 70vh; min-height: 325px; max-height:570px; }.wrapper>.left { background: #fcc; }.wrapper>.right { background: #ccf; }

 <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; 儿童

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

请记住，您通常不能使用width: ...和flex:1; 一起为一个孩子。

Answer 3

由于您的容器（包装器）中只有两个孩子，所以您要做的就是添加 display: flex; 和 justify-content: space-between; 而不是玩边际。

 .wrapper { display: flex; justify-content: space-between; }

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