Flexbox 孩子的身高不同答案

【问题标题】：Flexbox children not having same heightFlexbox 孩子的身高不同
【发布时间】：2019-07-12 20:57:36
【问题描述】：

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

【问题讨论】：

标签： html css flexbox alignment tailwind-css

【解决方案1】：

从 wrapper 类中删除 items-center 类 - 这是将 align-items: center 添加到您的 flexbox 并覆盖 默认拉伸 行为 -请看下面的演示：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.4/tailwind.min.css">

<div class="flex w-full flex-wrap">
  <!-- CHANGED HERE -->

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

【讨论】：