Flexbox行/列的高度相等 [英] Flexbox row/columns equal height

问题描述

我有一排有两列，两者均为50％.左边的是一幅图像，右边的是一幅文字.我的html:

I have a row with two columns, both 50%. The left one has an image, the right one text. My 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)相同的高度?

Now I want the background of cell2 to be green and need cell2 to be the same height as cell1, and I know I can achieve it by giving the row this background, but how do I make only cell2's background be green (and have the same height as cell1)?

推荐答案

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

Keep the default alignment on the main container stretch so that both will have the same height then align the content inside 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>

这篇关于Flexbox行/列的高度相等的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！