Рівни однакової висоти в гнучкому контейнері

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

В іншому випадку розгляньте альтернативу 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>

Розгорніть фрагмент

Хоча сама сітка не є flexbox, вона веде себе дуже схоже на контейнер flexbox , і елементи всередині сітки можуть бути гнучкими .

Макет сітки також дуже зручний у тому випадку, якщо вам потрібні адаптивні сітки. Тобто, якщо ви хочете, щоб сітка мала різну кількість стовпців на рядок, ви можете просто змінити 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

Підтримка макета сітки в браузерах:

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

Question 4

Ні, цього неможливо досягти без встановлення фіксованої висоти (або використання скрипта).

Ось 2 мої відповіді, в яких показано, як за допомогою сценарію досягти чогось такого:

Як отримати заголовок з карток або подібного, щоб мати однакову висоту з флеш-боксом?
Однакова висота для гнучких елементів у гнучкому контейнері стовпчика гнучкого напрямку

Question 5

Якщо ви знаєте елементи, через які здійснюєте картографування, це можна зробити, виконуючи по одному рядку . Я знаю, що це обхідний шлях, але це працює.

Для мене у мене було 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 6

Здається, це працює у випадках із фіксованою батьківською висотою (перевірено у 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 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" або встановивши висоту "елемента списку".

Я зробив, зафіксувавши висоту "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 "display". Детальніше див. Наведений приклад.

.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>