Строки одинаковой высоты в гибком контейнере

Question 1

Как видите, list-itemsу первого rowесть то же самое height. А вот предметы во втором у rowних разные heights. Я хочу, чтобы у всех предметов была униформа height.

Есть ли способ добиться этого без указания фиксированной высоты и только с помощью flexbox ?

Вот мой code

.list {
  display: flex;
  flex-wrap: wrap;
  max-width: 500px;
}
.list-item {
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content {
  width: 100%;
}

<ul class="list">
  <li class="list-item">
    <div class="list-content">
      <h2>box 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>
</ul>

Развернуть фрагмент

Question 2

Ответ - нет.

Причина указана в спецификации flexbox:

6. Гибкие линии

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

Другими словами, когда есть несколько строк в гибком контейнере на основе строк, высота каждой строки («поперечный размер») является минимальной высотой, необходимой для размещения гибких элементов в строке.

Однако в CSS Grid Layout возможны строки одинаковой высоты:

Строки одинаковой высоты в CSS Grid Layout

В противном случае рассмотрите альтернативу JavaScript.

Question 3

Вы можете сделать это сейчас с помощью display: grid:

.list {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  max-width: 500px;
}
.list-item {
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  margin-bottom: 20px;
}
.list-content {
  width: 100%;
}

<ul class="list">
  <li class="list-item">
    <div class="list-content">
      <h2>box 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>
</ul>

Развернуть фрагмент

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

Макет сетки также очень удобен, если вам нужны адаптивные сетки. То есть, если вы хотите, чтобы в сетке было разное количество столбцов в строке, вы можете просто изменить grid-template-columns:

grid-template-columns: repeat(1, 1fr); // 1 column
grid-template-columns: repeat(2, 1fr); // 2 columns
grid-template-columns: repeat(3, 1fr); // 3 columns

и так далее...

Вы можете смешивать его с медиа-запросами и изменять в соответствии с размером страницы.

К сожалению, до сих пор нет поддержки контейнерных запросов / запросов элементов в браузерах (из коробки), чтобы они хорошо работали с изменением количества столбцов в соответствии с размером контейнера, а не размером страницы (это было бы здорово использовать с многоразовыми веб-компонентами).

Подробнее о макете сетки:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Поддержка Grid Layout в браузерах:

https://caniuse.com/#feat=css-grid

Question 4

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

Вот два моих ответа, показывающих, как использовать скрипт для достижения чего-то подобного:

Как получить заголовок с карточек или аналогичных, чтобы они имели одинаковую высоту с гибким блоком?
Одинаковая высота для гибких элементов в гибком контейнере колонки с гибким направлением

Question 5

Кажется, это работает в случаях с фиксированной родительской высотой (проверено в Chrome и Firefox):

.child {
        height    : 100%;
        overflow  : hidden;
}

.parent {
        display: flex;
        flex-direction: column;
        height: 70vh; // ! won't work unless parent container height is set
        position: relative;
}

Если по какой-то причине невозможно использовать сетки, возможно, это решение.

Question 6

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

Для меня у меня было 4 элемента в строке, поэтому я разбил ее на две строки по 4 в каждой строке height: 50%, избавиться от flex-grow, иметь <RowOne />и <RowTwo />в <div>с flex-column. Это поможет

<div class='flexbox flex-column height-100-percent'>
   <RowOne class='flex height-50-percent' />
   <RowTwo class='flex height-50-percent' />
</div>

Question 7

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

.list-content{
  width: 100%;
  height:150px;
}

Question 8

С помощью flexbox вы можете:

ul.list {
    padding: 0;
    list-style: none;
    display: flex;
    align-items: stretch;
    justify-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
li {
    width: 100px;
    padding: .5rem;
    border-radius: 1rem;
    background: yellow;
    margin: 0 5px;
}

<ul class="list">
  <li>title 1</li>
  <li>title 2<br>new line</li>
  <li>title 3<br>new<br>line</li>
</ul>

Развернуть фрагмент

Question 9

вы можете сделать это, установив высоту тега «P» или высоту «list-item».

Я сделал, установив высоту "P"

и переполнение должно быть скрыто.

.list{
  display: flex;
  flex-wrap: wrap;
  max-width: 500px;
}

.list-item{
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content{
  width: 100%;
}
p{height:100px;overflow:hidden;}

<ul class="list">
  <li class="list-item">
    <div class="list-content">
    <h2>box 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>
</ul>

Question 10

для той же высоты вам следует изменить свойства "отображения" css. Подробнее см. Данный пример.

.list{
  display: table;
  flex-wrap: wrap;
  max-width: 500px;
}

.list-item{
  background-color: #ccc;
  display: table-cell;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content{
  width: 100%;
}

<ul class="list">
  <li class="list-item">
    <div class="list-content">
    <h2>box 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>