Flexbox колонны с детьми одинаковой высоты/выровненные вершины

Question

у меня есть макет Flexbox в мое приложение похоже на ниже фрагменте кода, набор li с с тремя div с в каждом

.container { 
 
    width: 500px; 
 
} 
 
ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
} 
 
li { 
 
    border: solid 1px black; 
 
    flex: 1; 
 
} 
 
.title { 
 
    border: solid 1px red; 
 
    margin-bottom: 1em; 
 
} 
 
.content { 
 
    border: solid 1px yellow; 
 
    margin-bottom: 1em; 
 
} 
 
.footer { 
 
    border: solid 1px blue; 
 
}

<div class="container"> 
 

 
    <ul> 
 
    <li> 
 
     <div class="title"> 
 
     Blah Blah Blah Blah Blah Blah 
 
     </div> 
 
     <div class="content"> 
 
     Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
 
     </div> 
 
     <div class="footer"> 
 
     Some other stuff here 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="title"> 
 
     Blah Blah Blah Blah Blah Blah 
 
     </div> 
 
     <div class="content"> 
 
     Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
 
     </div> 
 
     <div class="footer"> 
 
     Some other stuff here 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="title"> 
 
     Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
 
     </div> 
 
     <div class="content"> 
 
     Blah Blah Blah Blah Blah Blah Blah Blah 
 
     </div> 
 
     <div class="footer"> 
 
     Some other stuff here 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

Я ищу, чтобы дети divs начинались на одном уровне за раз, например желтые вершины div равны, а синие div-вершины равны. Раньше я делал это, делая детей divs абсолютным позиционированием, а затем фиксировал их высоту с фиксированными вершинами. Однако, делая это, я должен установить высоту на основе угаданного максимального размера текста, который они будут содержать, что в сочетании с отзывчивой страницей (существует единая точка останова, где она идет из бок о бок столбцов в карусель) , это может привести к большому пустому пространству в столбцах.

Большинство примеров, которые я нашел (поскольку я, по-видимому, действительно не знаю правильных терминов для Google, это ...) включает либо Javascript, либо переупорядочивает разметку, чтобы иметь строки в верхней части иерархии, а не столбцы. Я хотел бы придерживаться столбцов, они настроены для обработки случаев 1, 2 или 3 столбцов, а также служат карусели на небольших устройствах.

Мне не хватает, как это сделать, или я придерживаюсь Javascript?

Answer 1

Если вы измените свою разметку HTML на это (удалите ul li), вы можете сделать это с помощью Flexbox. Вы можете установить flex: 0 0 33% на каждый элемент и flex-wrap: wrap, поэтому, когда flexbox переносит элементы в новую строку, он будет поддерживать одинаковые высоты элементов в каждой строке. Затем вам необходимо настроить порядок элементов в столбце с помощью переключателя nth-child().

* { 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    width: 500px; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
div > div { 
 
    flex: 0 0 33%; 
 
} 
 
div > div:nth-child(3n-2) { 
 
    order: 1; 
 
} 
 
div > div:nth-child(3n-1) { 
 
    order: 2; 
 
} 
 
div > div:nth-child(3n) { 
 
    order: 3; 
 
} 
 
.title { 
 
    border: solid 1px red; 
 
    margin-bottom: 1em; 
 
} 
 
.content { 
 
    border: solid 1px yellow; 
 
    margin-bottom: 1em; 
 
} 
 
.footer { 
 
    border: solid 1px blue; 
 
}

<div class="container"> 
 
    <div class="title"> 
 
    Blah Blah Blah Blah Blah Blah 
 
    </div> 
 
    <div class="content"> 
 
    Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
 
    </div> 
 
    <div class="footer"> 
 
    Some other stuff here 
 
    </div> 
 

 
    <div class="title"> 
 
    Blah Blah Blah Blah Blah Blah 
 
    </div> 
 
    <div class="content"> 
 
    Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
 
    </div> 
 
    <div class="footer"> 
 
    Some other stuff here 
 
    </div> 
 
    <div class="title"> 
 
    Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
 
    </div> 
 
    <div class="content"> 
 
    Blah Blah Blah Blah Blah Blah Blah Blah 
 
    </div> 
 
    <div class="footer"> 
 
    Some other stuff here 
 
    </div> 
 
</div>