Как распределить элементы неравной ширины для заполнения контейнера с помощью flexbox - PullRequest
Новая
       200

Как распределить элементы неравной ширины для заполнения контейнера с помощью flexbox

0 голосов
/ 30 мая 2020

У меня есть требование, чтобы отображать динамические c элементы неравной ширины в контейнере, но это должно соответствовать родительскому контейнеру. Это динамический c элемент, поэтому мы не можем знать его длину. Если в строке нет места, нам нужно отобразить этот элемент в следующей строке, но существующие строки должны быть распределены поровну, чтобы соответствовать ширине контейнера. Что-то вроде этого:

Мое ожидание: enter image description here

Я создал контейнер с display: flex и поместил внутрь дочерние элементы так, чтобы их ширина соответствовала содержимому внутри. Элементы могут отображаться в следующей строке, если для них нет места, но я не знаю, как распределить существующие элементы, чтобы заполнить всю строку? enter image description here

Код: 

.container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  width: 350px;
  border-style: dotted;
}
.item {
  background-color: coral;
  padding: 10px 1em;
  margin: 5px;
}
<div class="container">
  <div class="item">Lorem ipsum</div>
  <div class="item">Lorem ipsum dolor</div>
  <div class="item">adipiscing</div>
  <div class="item">consectetur adipiscing elit</div>
  <div class="item">Lorem ipsum dolor sit amet</div>  
  <div class="item">Lorem ipsum dolor</div>
</div>

Интересно, есть ли у flexbox свойство CSS для решения этой проблемы?

1 Ответ

1 голос
/ 30 мая 2020

могут использоваться некоторые дополнительные CSS для поведения содержимого и дочерних элементов: 

  flex:1 0 auto;/* make it stretch as much as possible*/
  max-width:calc(100% - 10px);/* do not let it be bigger than container width minus margin */
  white-space: pre-wrap;/* keep on a single line as much as possible */

Возможная демонстрация 

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  gap: 10px;/*NOTICE: understood by Firefox at the moment */
  flex-wrap: wrap;
  width: 350px;
  border-style: dotted;
}
.item {
  background-color: coral;
  padding: 10px 1em;
  margin: 5px;
  /* update a few behaviors */
  flex:1 0 auto;
  max-width:calc(100% - 10px);/* 10px is right + left margin */
  white-space: pre-wrap;
}
<div class="container">
  <div class="item">Lorem ipsum</div>
  <div class="item">Lorem ipsum dolor</div>
  <div class="item">adipiscing</div>
  <div class="item">consectetur adipiscing elit</div>
  <div class="item">Lorem ipsum dolor sit amet</div>  
  <div class="item">Lorem ipsum dolor</div>
  <div class="item">Lorem ipsum dolor</div>
  <p class="item">Pellentesque habitant morbi tristique senectus et netus et  netus et malesuada  ac turpis egestas.</p>
</div>
...