Равное пространство между гибкими элементами

Есть ли способ поместить полный блок пространства с обеих сторон всех предметов, включая первый и последний?

Я пытаюсь найти способ иметь равный интервал вокруг детей flexbox.

В этой статье кажется, что ближайшая вещь justify-content: space-around, Это говорит о том, что:

space-around: предметы равномерно распределены по линии с равным пространством вокруг них. Обратите внимание, что визуально пространства не равны, так как все элементы имеют одинаковое пространство с обеих сторон. Первый элемент будет иметь одну единицу пространства напротив края контейнера, но две единицы пространства между следующим элементом, потому что у следующего элемента есть свой собственный интервал, который применяется.

Источник

5 ответов

Существует как минимум два метода для равного пространства между всеми элементами, включая первый и последний элементы. Один метод, однако, еще не имеет полной поддержки браузера.

псевдо-элементы

Обратите внимание на этот раздел документации Firefox:

В-потока ::after а также ::before псевдоэлементы теперь являются гибкими элементами.

Фактически, все основные браузеры считают псевдоэлементы в гибком контейнере гибкими элементами.

Зная это, добавь ::before а также ::after в ваш контейнер.

С justify-content: space-between и псевдоэлементы нулевой ширины, видимые изогнутые элементы будут выглядеть равномерно.

flex-container {
  display: flex;
  justify-content: space-between;
}

flex-container::before {
  content: "";
}

flex-container::after {
  content: "";
}

/* non-essential decorative styles */
flex-container {
  padding: 5px 0;
  background-color: lightyellow;
  border: 1px solid #aaa;
}
flex-item {
  height: 50px;
  width: 75px;
  background-color: lightgreen;
}
<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

space-evenly

Модуль CSS Box Alignment, который является незаконченным предложением W3C по созданию общего набора свойств выравнивания для использования во всех блочных моделях, обеспечивает space-evenly значение для использования с justify-content а также align-content свойства.

4,3. Распределенное выравнивание: stretch , space-between , space-around , а также space-evenly ключевые слова

space-evenly

Объекты выравнивания равномерно распределены в контейнере выравнивания с полноразмерным пространством на обоих концах.

Объекты выравнивания распределяются таким образом, чтобы расстояние между любыми двумя соседними объектами выравнивания, до первого объекта выравнивания и после последнего объекта выравнивания было одинаковым.

Однако на момент написания статьи это выглядит space-evenly работает только в Firefox и Chrome.

flex-container {
  display: flex;
  justify-content: space-evenly;
}

/* non-essential decorative styles */
flex-container {
  padding: 5px 0;
  background-color: lightyellow;
  border: 1px solid #aaa;
}
flex-item {
  height: 50px;
  width: 75px;
  background-color: lightgreen;
}
<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

Кроме того, вот полезная демонстрация от MDN justify-content страница для тестирования space-evenly и другие значения в вашем браузере. https://jsfiddle.net/gkrsr86n/

Источник

Это идеальный вариант использования для flex-basis а также justify-content: space-between если вы знаете, сколько компонентов будет в вашем ряду заранее. Укажите процент флекс-основы для ваших флекс-элементов, который составляет менее 100% для всех элементов. Оставшиеся проценты станут наценками.

Нет элементов псевдо, дочерних селекторов или отступов / полей.

div {
  display: flex;
  justify-content: space-between;
  height: 100px;


}
span {
  flex-basis: 32%;
  background: red;
}
<div>
  <span></span>
  <span></span>
  <span></span>
</div>

Источник

Вы можете сделать это, установив padding гибкого контейнера и margin из гибких элементов:

.container { 
  display: flex;   
  padding: 0 1%;
}
.item { 
  flex: 1; 
  margin: 0 1%;
}

https://codepen.io/danieldilly/pen/PjgRbe

Источник

В Firefox только есть space-evenly значение для justify-content это делает это

Это в рабочем проекте CSS3

https://www.w3.org/TR/css-align-3/

div {
  display: flex;
  height: 100px;
  justify-content: space-evenly;
  border: 1px solid black;
  margin: auto;
}
span {
  width: 20%;
  background: red;
}
<div>
  <span></span>
  <span></span>
  <span></span>
</div>

Источник

Вы можете попробовать это:

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.list_wrap {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid purple;
  padding-top: 5px;
}
.list_item {
  width: 24%;
  margin-right: 0.8%;
  margin-bottom: 5px;
  height: 30px;
  border: 1px solid green;
}
.list_item:nth-child(4n+1) {
  margin-left: 0.8%;
}
<div class="list_wrap">
  <div class="list_item"></div>
  <div class="list_item"></div>
  <div class="list_item"></div>
  <div class="list_item"></div>
  <div class="list_item"></div>
  <div class="list_item"></div>
  <div class="list_item"></div>
  <div class="list_item"></div>
</div>

Источник

Вы можете использовать все свойства flexbox здесь. это прекрасный пример того, как использовать полное свойство flex с примером http://the-echoplex.net/flexyboxes/

Источник
Другие вопросы по тегам