你能让 flexbox 背景高度相同吗？

Question

我正在使用 flexbox 显示，它工作正常。除非我碰巧在其中一个 div 上使用了背景颜色，否则该颜色不会覆盖 div 的整个高度。它最终看起来像这样——

当然，我想要的是背景颜色扩展到与右侧的 div 相同的高度。这甚至可以用 flexbox 实现吗？

.row {
    display: flex;
    align-items: center;
}
.left {
    flex: 1 0 auto;
    background-color: wheat;
}
.right {
    flex: 1 0 auto;
}

<div class="row">
    <div class="left">Some text</div>
    <div class="right">
        <input type="text" style="height:40px" />
    </div>
</div>

Answer 1

问题是你使用

align-items: center;

默认值做你想要的：

align-items: stretch;

.row {
  display: flex;
}
.left {
  flex: 1 0 auto;
  background-color: wheat;
}
.right {
  flex: 1 0 auto;
}

<div class="row">
  <div class="left">
    Some text
  </div>
  <div class="right">
    <input type="text" style="height:40px" />
  </div>
</div>

但是随后您需要将内容垂直居中。你可以用更多的 flexbox 来做到这一点。一些例子：

• 行布局和align-items：

  .left {
    display: flex;       /* More flexbox */
    align-items: center; /* Center in the cross (vertical) axis */
  }
  

  .row {
    display: flex;
  }
  .left {
    flex: 1 0 auto;
    background-color: wheat;
    display: flex;
    align-items: center;
  }
  .right {
    flex: 1 0 auto;
  }

  <div class="row">
    <div class="left">
      Some text
    </div>
    <div class="right">
      <input type="text" style="height:40px" />
    </div>
  </div>

• 列布局和justify-content：

  .left {
    display: flex;           /* More flexbox */
    flex-direction: column;  /* Column layout */
    justify-content: center; /* Center in the main (vertical) axis */
  }
  

  .row {
    display: flex;
  }
  .left {
    flex: 1 0 auto;
    background-color: wheat;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .right {
    flex: 1 0 auto;
  }

  <div class="row">
    <div class="left">
      Some text
    </div>
    <div class="right">
      <input type="text" style="height:40px" />
    </div>
  </div>

• 插入带auto边距的伪元素：

  .left {
    display: flex;          /* More flexbox */
    flex-direction: column; /* Column layout */
  }
  .left::before, .left::after {
    content: '';            /* Generate pseudo-elements */
    margin: auto;           /* Push contents */
  }
  

  .row {
    display: flex;
  }
  .left {
    flex: 1 0 auto;
    background-color: wheat;
    display: flex;
    flex-direction: column;
  }
  .left::before, .left::after {
    content: '';
    margin: auto;
  }
  .right {
    flex: 1 0 auto;
  }

  <div class="row">
    <div class="left">
      Some text
    </div>
    <div class="right">
      <input type="text" style="height:40px" />
    </div>
  </div>