如何拉伸孩子以填充横轴? [英] How to stretch children to fill cross-axis?

问题描述

我有一个左右Flexbox:

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.

如何做到这一点?

推荐答案

• flexbox容器的子代自动填充容器的垂直空间.

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

    为孩子指定flex: 1;，以使其填充剩余的水平空间:

    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>

    • 为两个孩子指定flex: 1;，如果您希望他们填充相等数量的水平空间:
    • 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>

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