Question

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

enter image description here

我当然希望背景颜色延伸到与右边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;

＆＃13;

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

＆＃13;

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

＆＃13;

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

行布局和align-items：

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

＆＃13;

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

＆＃13;

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

＆＃13;

列布局和justify-content：

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

你能让flexbox的背景高度一样吗？

1 个答案: