it-swarm.com.ru

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

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

 enter image description here

Есть ли способ достичь этого без указания fixed-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>

32
Jinu Kurian

Ответ - нет.

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

6. Flex Lines

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

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

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

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

41
Michael_B

Вы можете сделать это сейчас с помощью 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, и элементы внутри сетки могут быть flex.

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

9
Lucas Basquerotto

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


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

3
LGSon

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

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

0
Stanislav E. Govorov

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

Для меня у меня было 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>
0
Kevin Danikowski