不同高度的 tailwindcss flexcols

Question

我想将 div 分成具有个人高度的两部分。但是顺风的 flex 和 grid 类会将较小的孩子的高度拉伸到另一个孩子的高度。

目前看起来像这样

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-row">
  <div class="bg-green-500 w-1/2">
    <div class="h-4"></div>
  </div>
  <div class="bg-red-500 w-1/2">
    <div class="h-12"></div>
  </div>
</div>

如何达到个人身高？（Childs 的内容是通过编程设置的，并且并不总是具有相同的高度）

Answer 1

在 Flexbox 中，默认行为align-items是stretch。这实际上将匹配一行中所有元素的高度。您需要将其更改为flex-start。

添加.items-start班级。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-row items-start">
  <div class="bg-green-500 w-1/2">
    <div class="h-4"></div>
  </div>
  <div class="bg-red-500 w-1/2">
    <div class="h-12"></div>
  </div>
</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items