html - Flexbox 行/列等高

Question

我有一行有两列，都是 50%。左边是图片，右边是文字。我的 html:

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

.cell1, .cell2{
  width:50%;
}

.cell2 {
  background: green;
}

<div class="row">
    <div class="cell1"><img src="https://via.placeholder.com/450x450" ></div>
    <div class="cell2">Cell 2</div>
</div>

现在我希望单元格 2 的背景为绿色并且需要单元格 2 与单元格 1 的高度相同，我知道我可以通过为该行提供此背景来实现它，但是我如何只使单元格 2 的背景为绿色(并且与 cell1 具有相同的高度)？

Answer 1

在主容器 stretch 上保持默认对齐方式，以便两者具有相同的高度，然后对齐 cell2 中的内容:

.row {
  display: flex;
}

.cell1,
.cell2 {
  width: 50%;
}

.cell2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  background:green;
}

<div class="row">
  <div class="cell1"><img src="https://picsum.photos/300/200?image=0" ></div>
  <div class="cell2">some text here</div>
</div>