我以为 flexbox 会让其子元素具有相同的高度,也就是说,所有子元素将像最高的子元素一样高,而父元素通过在交叉轴上具有默认值 align-stretch(如果它是 flex-row)来实现这一点。但在我的情况下并非如此。
我有以下代码片段:
代码片段链接
<div class="flex w-full items-center flex-wrap">
<div class="flex flex-col md:w-1/2 items-center px-16 py-20 bg-red">
<h2 class="marjan-col">Smaller text</h2>
<p>This one has smaller text</p>
</div>
<div class="flex flex-col md:w-1/2 items-center px-16 py-20 bg-blue">
<h2 class="text-white">Bigger text that controls element height</h2>
<p class="text-white">
Blue element has more text thus making red element smaller and unable to fit entire height
</p>
</div>
</div>
请注意,较高的元素(红色背景)与蓝色元素的高度不同。
我在这里使用了tailwind.css,但我认为代码是自说明的。