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

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

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

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

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

Ответы

Ответ 1

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

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

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

In-flow :: after и :: before псевдоэлементы теперь гибки пункты.

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

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

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

  flex-container {
 дисплей: flex;
 justify-content: space-between;
}

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

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

/* несущественные декоративные стили */
flex-container {
 padding: 5px 0;
 background-color: lightyellow;
 border: 1px solid #aaa;
}
flex-item {
 высота: 50 пикселей;
 ширина: 75 пикселей;
 background-color: lightgreen;
}Код>

  < flex-container >
 < Flex-элемент & ЕТ; </Flex-элемент >
 < Flex-элемент & ЕТ; </Flex-элемент >
 < Flex-элемент & ЕТ; </Flex-элемент >
 < Flex-элемент & ЕТ; </Flex-элемент >
</Flex-контейнер >код>

Ответ 2

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

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

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

Ответ 3

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

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

https://www.w3.org/TR/css-align-3/#valdef-align-content-space-evenly

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>

Ответ 4

Вы можете попробовать следующее:

*, *: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>

Ответ 5

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