Question

我在样式表中使用flex的新手。

我试图强制两个块级元素具有相同的高度。

这是小提琴：https://jsfiddle.net/r9pwzonx/

.flex {
  display: flex;
  flex-direction: column;
}
.first {
  padding: 1em;
  background: blue;
  flex: 1;
}
.second {
  padding: 1em;
  background: red;
  flex: 1;
}

<div class="flex">
    <div class="first">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
    </div>

    <div class="second">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam minus aliquam assumenda consequuntur, laboriosam ducimus ad quis omnis, molestiae a iure nesciunt voluptate rem libero accusantium, deleniti, porro nemo excepturi?</p>
    </div>
</div>

我认为较小的盒子的高度没有任何变化，以匹配较大盒子的高度。

Answer 1

I do not see any change in the height of the smaller box to match the height of the larger box.

You cannot do that in a flex box with that flex-direction: columnbecause that the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept.A flex container expands items to fill available free space, or shrinks them to prevent overflow.
If you give row a fixed height , I believe this should work as you expect. If you're not trying to use fixed height.It depends on the the things that inside on that flexboxes.

CODEPEN WITH LINE-HEIGHT

CODEPEN WITH FIXED-HEIGHT

使用flexbox获得相等高度的行，而不是列

1 个答案: