Question

我有一个左右弹片箱：

＆＃13;

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

＆＃13;

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

＆＃13;

问题在于，正确的孩子没有表现出反应。具体来说，我希望它填充包装器的高度。如何做到这一点？

Answer 1

行-flexbox容器的子项自动填充容器的垂直空间。
如果您希望孩子填充剩余的水平空间，请为其指定flex: 1;：

＆＃13;

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

＆＃13;

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

＆＃13;

如果您希望它们填充等量的水平空间，请为这两个子项指定flex: 1;：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

2 个答案: