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>

现在我想要cell2的背景是绿色的,并且需要cell2与cell1的高度相同,我知道我可以通过给出这个背景的行来实现它,但是我怎么才让cell2的背景变成绿色(并且具有相同的高度为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>