Flexbox 行/列等高答案

【问题标题】：Flexbox row/columns equal heightFlexbox 行/列等高
【发布时间】：2018-10-03 13:08:24
【问题描述】：

我有一排有两列，都是 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) 的高度相同？

【问题讨论】：

标签： html css flexbox

【解决方案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>

【讨论】：

【解决方案2】：

从row 中删除align-items: center; 并在cell2 中添加display:flex

.row{
  display:flex;
  flex-direction:row;  
  flex-wrap: wrap;
}

.cell1, .cell2{
  width:50%;
  display:flex;
}
.cell1 img {
  max-width: 100%;
}
.cell2 {
  background: green;
  display:flex;
  align-items: center;
}

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

【讨论】：

这行得通，但是响应能力有问题。在某个时间点，当文本变得太长时，图像的高度会被拉伸。

【解决方案3】：

.row{
  display:flex;
/*   flex-direction:row; */
/*   align-items:center; */ 
}
.cell1, .cell2{
  width: 50%;
}
.cell1 img {
  width: 100%;
  height: auto;
  display: block;
}
.cell2 {
  background: green;
}

<div class="row">
    <div class="cell1"><img src="https://image.ibb.co/jqzDOe/111.jpg"></div>
    <div class="cell2">Cell 2</div>
</div>

【讨论】：