Блог

Главная - Вопросы по программированию - подветренные колеса flexcol с разной высотой

подветренные колеса flexcol с разной высотой

#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>
Метки: