Flexbox行：如何拉伸儿童填充横轴？ [英] Flexbox row: How to stretch children to fill cross-axis?

问题描述

我有一个左右弯曲盒：

.wrapper {display：flex; flex-direction：row; align-items：stretch;宽度：100％;身高：70vh; min-height：325px;最大高度：570px; }

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

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



谢谢，
Debbie


解决方案

b

行 - flexbox容器的子代自动填充容器的垂直空间。如果你想要填充剩余的水平空间，为一个子项指定 flex：1; ：

$ b $ p

div class =snippet-code>

.wrapper {display：flex; flex-direction：row; align-items：stretch;宽度：100％;身高：5em;背景：#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; li>
  

.wrapper {display：flex; flex-direction：row; align-items：stretch;宽度：100％;身高：5em;背景：#ccc;}。wrapper> div {flex：1; } .wrapper> .left {background：#fcc;}。wrapper> .right {background：#ccf;}

< div类= 包装 > < div class =left> Left< / div> < div class =right> Right< / div>< / div>

I have a left-right 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>

The problem is that the right child is not behaving responsively. To be specific, I want it to fill the height of the wrapper. How to accomplish this?

Thanks, Debbie

解决方案

• The children of a row-flexbox container automatically fill the container's vertical space.

• Specify flex: 1; for a child if you want it to fill the remaining horizontal space:

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

• Specify flex: 1; for both children if you want them to fill equal amounts of the horizontal space:

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

这篇关于Flexbox行：如何拉伸儿童填充横轴？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！