Flexbox дети, не имеющие одинакового роста - PullRequest
Новая
       37

Flexbox дети, не имеющие одинакового роста

0 голосов
/ 19 февраля 2019

Я думал, что у flexbox его дочерние элементы имеют одинаковую высоту, а это означает, что все дочерние элементы будут такими же высокими, как и самый высокий (самый высокий) дочерний элемент, и родительский элемент получит это, имея значение по умолчанию align-stretch для поперечной оси (если это flex-row),В моем случае это не так.У меня есть следующее перо: Ссылка Codepen 

<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, но я думаю, что код не требует пояснений.

1 Ответ

0 голосов
/ 19 февраля 2019

Удалить класс 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>
...