#html #css #tailwind-css
Вопрос:
Я хочу разделить div на две части с индивидуальными высотами. Но классы flex и grid от tailwind растянут высоту меньшего ребенка до высоты другого ребенка.
На данный момент это выглядит так
<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>
Как мне достичь индивидуального роста? (содержимое детей задается программно и не всегда имеет одинаковую высоту)
Ответ №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
Ответ №2:
Просто переместите класс h в родительский раздел
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-row h-min">
<div class="h-4 bg-green-500 w-1/2">
<div class=""></div>
</div>
<div class="h-12 bg-red-500 w-1/2">
<div class=""></div>
</div>
</div>