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

94

Как видите, 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>
Развернуть фрагмент

html css flexbox Джину Куриан
источник
Один из способов - установить высоту элемента, которая может меняться по высоте
onmyway133

Ответы:

80

Ответ - нет.

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

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

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

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

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

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

Майкл Бенджамин
источник
Безопасна ли сетка css на данный момент?
Александр Ким
43

Вы можете сделать это сейчас с помощью 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

Лукас Баскеротто
источник
Мне нравится такой подход "могу сделать"! Спасибо также за рабочий пример
hananamar
это не реализует то же поведение, что и упаковка flexbox. также вопрос, на который был задан ответ, с помощью flexbox.
Энди
@Andy Как уже сказано в принятом ответе, вы не можете добиться этого с помощью flexbox (без js). Я также позаботился о том, чтобы сказать, что это действительно не flexbox («Хотя сама сетка не является flexbox ...»), и я не говорю, что поведение в точности такое же, как у flexbox (что очевидно), но это очень подобный и решает заданную проблему (за исключением того факта, что это не flexbox), и, что более важно , он может решить аналогичные проблемы для других пользователей, ищущих аналогичный подход. Кроме того, элементы могут быть гибкими (в отличие, например, от макета таблицы, который ожидает элементы таблицы).
Лукас Баскеротто
3

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

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

Сын
источник
1

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

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

Для меня у меня было 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>
Кевин Даниковски
источник
-1

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

.list-content{
  width: 100%;
  height:150px;
}
Том
источник
Извините, высота может варьироваться в зависимости от содержимого. Поэтому не могу дать фиксированной высоты.
Jinu Kurian
Высота рассчитывается автоматически, поэтому с вашим различным контентом высоты будут разными, поэтому вы должны использовать фиксированную высоту, иначе вы не сможете получить одинаковые высоты.
Tom
-1

С помощью 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>
Развернуть фрагмент

Хишам Далал
источник
Я не думаю, что это дает одинаковую высоту, когда предметы складываются вертикально.
workwise
извините, но вы можете попробовать другой ответ вместо того, чтобы отмечать мой ответ как отрицательный!
Hisham Dalal
-3

вы можете сделать это, установив высоту тега «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>

Аджай Малхотра
источник
Кажется, это не тот ответ, который я ищу, если контент станет больше, он будет скрыт.
Jinu Kurian
@JinuKurian, где я добавляю overflow: hidden, если вы измените это на overflow: auto, появится прокрутка. тогда вы также сможете увидеть полный контент
Аджай Малхотра
-6

для той же высоты вам следует изменить свойства "отображения" 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>

Анкит
источник
Спасибо, но я хочу отображать списки в несколько строк.
Jinu Kurian