Выравнивание блоков по ширине

214

06 апреля 2018, 14:39

Доброго времени суток. У меня вопрос по flex. Есть родительский блок с display: flex, в нем 2 блока с display: flex и дочерние блоки.

<div style="display: flex;">
  <div style="display: flex; flex-wrap: wrap;">
    <div 1a>text text texttext text text text text text text</div>
    <div 2a>text text</div>
    <div 3a>texttexttexttext text text</div>
  </div>
  <div style="display: flex; flex-wrap: wrap;">
    <div 1b>display display displaydisplaydisplaydisplay displaydisplaydisplaydisplaydisplay display display</div>
    <div 2b>display</div>
    <div 3b>display display</div>
  </div>
</div>

Как сделать чтобы дочерние блоки равнялись по высоте как 1a = 1b, 2a = 2b, 3a = 3b, не зависимо он их содержимого?

Answer 1

Почему flex не вариант!?

Flexbox по определению не может создавать ряды с одинаковой высотой, одинаковую высоту можно получить только в одном ряду для всех элементов внутри него.

Flexbox lines

In a multi-line flex container, the cross size of each line is the minimum size necessary to contain the flex items on the line.

Решение

В данном случае, я бы порекомендовал вам использовать grid, потому что это очень эффективно (за счет скорости и легкости написания) и легко поддерживать.

Можете убедиться сами.

Пример

.parent { 
  display: grid; 
  grid-auto-rows: 1fr; 
  grid-template-columns: repeat(3, 1fr); 
  width: 100%; 
  grid-gap: 10px; 
} 
 
.child { 
  border: 2px solid black; 
  border-radius: 5px; 
  padding: 20px; 
}

<div class="parent"> 
  <div class="child">asddsa asddsa asddsa asddsa asddsa asddsa asddsa</div> 
  <div class="child">asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa</div> 
  <div class="child">asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa</div> 
  <div class="child">dsadsadasdasdas asd das das das das das das</div> 
  <div class="child">dsadsadasdasdas asd das das das das das das</div> 
    <div class="child">asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa asddsa</div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как правильно просчитать?

Есть такой самописный слайдер, нужно что бы слайды всегда были на весь экран, независимо от изменения размера экрана, не могу придумать, как...

220

Java

Ошибка при входе на страницу “админки”

Код страницы для перехода на страницу админки:

255

Java

Установить картинку на фон textArea

Добрый день,пишу легкий чатик, захотел сделать приятный интерфейс, и при попытке поставить картинку на фон textArea столкнулся с проблемой отсутствия...

300

Java

Внешние ключи в стиле orm

Как сделать внешние ключи в стиле orm? Пожалуйста, приведите подробные примеры

269