Question

我认为flexbox使其子级具有相同的高度，这意味着所有子级都将与最高（最高）子级一样高，而父级则通过为横轴设置align-stretch的默认值（如果为flex-row）来使其高度。就我而言，情况并非如此。我有以下笔： Codepen link

<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，但我认为代码是不言自明的。

Answer 1

从 wrapper 类中删除<dependency> <groupId>org.apache.kafka</groupId> <artifactId>kafka-clients</artifactId> <version>0.10.1.0</version> </dependency>类-这是在{em> flexbox 中添加items-center并覆盖默认拉伸行为-参见下面的演示

align-items: center

Flexbox孩子的身高不同

1 个答案: