Равномерные ряды в гибком контейнере

Question

Как вы можете видеть, 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>

Answer 1

Ответ НЕТ.

Причина предусмотрена в спецификации Flexbox:

6. Flex Lines

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

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

равные ряды по высоте, однако, возможны и в макете сетки CSS:

• Equal height rows in CSS Grid Layout

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

Answer 2

для той же высоте, вы должны Ставить ваши 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>

Answer 3

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

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

Answer 4

вы можете сделать это путем фиксирования высоты " P "или фиксируя высоту" list-item ".

я делал, фиксируя высоту «Р»

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

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

Answer 5

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

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

Answer 7

Это, кажется, работает в случаях с фиксированной родительской высотой (протестирована в 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; 
} 

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