html - 使用 flexbox 对齐元素中心的拉伸(stretch)高度

Question

我有一个带有 display: flex; 的 div flex 方向:行；。除非我指定 align-items: center，否则此 div 的子元素占据全高。下面的代码 -

.row {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100px;
  background: beige;
  border: 1px solid red;
  margin: 10px 0;
}

.row2 {
  align-items: center;
}

.row-item {
  border: 1px solid green;
}

.item1,
.item3 {
  width: 100px;
}

.item2 {
  flex: 1;
}

<div class="row row1">
  <div class="row-item item1">1</div>
  <div class="row-item item2">
    <div> 2.1 </div>
    <div> 2.2 </div>
  </div>
  <div class="row-item item3">3</div>
</div>

<div class="row row2">
  <div class="row-item item1">1</div>
  <div class="row-item item2">
    <div> 2.1 </div>
    <div> 2.2 </div>
  </div>
  <div class="row-item item3">3</div>
</div>

JSFiddle

我想要实现的是 2.1 和 2.2 应该采用 50px (50%) 高度并且应该使其内容垂直居中对齐。他们还应该水平拉伸(stretch)全部可用空间(例如 width: auto 或 100%)。然后，如果 2.1 不存在，则 2.2 的高度应为 100px，并且应垂直居中对齐。

Answer 1

您需要将行元素设为 flexbox 并对其应用 align-items: center;

这是你应该添加的代码

.row1 .row-item {
  display: flex;
  align-items: center;
}

查看下面的结果:

.row {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100px;
  background: beige;
  border: 1px solid red;
  margin: 10px 0;
}

.row2 {
  align-items: center;
}

.row-item {
  border: 1px solid green;
}

.row1 .row-item {
  display: flex;
  flex-wrap: wrap;
}

.row1 .row-item div {
  width: 100%;
  border: 1px solid blue;
  display: flex;
  align-items: center;
}

.item1,
.item3 {
  width: 100px;
}

.item2 {
  flex: 1;
}

<div class="row row1">
  <div class="row-item item1">1</div>
  <div class="row-item item2">
    <div> 2.1 </div>
    <div> 2.2 </div>
  </div>
  <div class="row-item item3">3</div>
</div>

<div class="row row2">
  <div class="row-item item1">1</div>
  <div class="row-item item2">
    <div> 2.1 </div>
    <div> 2.2 </div>
  </div>
  <div class="row-item item3">3</div>
</div>