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>

Answer 2

从align-items: center;中删除row，并用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>

Answer 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>

Flexbox行/列的高度相等

3 个答案: