Justify-content: space-between с равным пространством между первым и последним элементами также

Я хочу использовать flexbox для настройки простой эластичной сетки...

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

... но Я хочу, чтобы внешние поля были равны пробелу между элементами.

* Под "упругим" я подразумеваю, что ширина не фиксирована. Все они являются процентами и имеют разную общую ширину при разной ширине экрана.

Это не похоже на поведение по умолчанию justify-content: space-between по умолчанию. Он генерирует равное пространство "вокруг" каждого элемента, но пространство не разрушает способ заполнения полей. Поэтому результат состоит в том, что "между" пространствами в два раза больше, чем справа и слева (при условии, что вы являетесь гибким направлением row).

В приведенном ниже эскизе первая диаграмма - это то, что justify-content: space-between делает естественно. Ширины извещения A и B. Вторая диаграмма - это то, что я хочу (только один последовательный желоб C).

Возможно ли это с помощью flexbox?

Обновление

Я хотел бы избежать необходимости добавлять элементы "строки", если это возможно. Решение псевдоэлемента похоже на билет (см. Ответы ниже), но дайте ему возможность работать, чтобы элементы могли иметь неопределенное число (и переносить на новые строки).

Ответ 1

Вы можете использовать space-between с псевдоэлементами из родительского

.flex {
  display: flex;
  width: 500px;
  border: 1px solid black;
  justify-content: space-between;
}
.flex > div {
  background: #eee;
  border: 1px solid #aaa;
  height: 100px; width: 100px;
}
.flex:before,.flex:after {
  content: '';
}

<div class="flex">
  <div></div>
  <div></div>
  <div></div>
</div>

Ответ 2

Как использовать псевдо-элементы ширины 0 до и после элементов?

.container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border: 1px solid #C55;
}

.column {
  flex: 1 20%;
  max-width: 20%;
  height: 100px;
  background: #C55;
}

.even:before, .even:after{
  content: '';
  display: block;
  width: 0;
}

no side spacing:
<div class="container">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>
<br>
side spacing:
<div class="container even">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

Ответ 3

Пара псевдоэлементов выполнит это:

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

flex-item {
  flex: 0 0 20%;
  height: 100px;
  margin: 5px 0;
  background-color: lightyellow;
}

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

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

<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

Ответ 4

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

Первый элемент - это особый случай, и ему нужен левый край; все остальные имеют только маржу справа.

Но это решение не будет работать с включенной оберткой. (Нет способа настроить таргетинг на первый элемент второй и последующих строк)

.flex {
  display: flex;
  width: 500px;
  border: 1px solid black;
}

.flex > div {
  background: lightblue;
  height: 100px; 
  width: 100px;
  margin-right: auto;
}

.flex > div:first-child {
  margin-left: auto;
}

<div class="flex">
  <div></div>
  <div></div>
  <div></div>
</div>

Ответ 5

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

С дополнительным запросом на мультимедиа должно быть возможно настроить свойство flex grow, чтобы поддерживать почти равное пространство.

.flex.outer {
  display: flex;
  width: 500px;
  border: 1px solid #aaa;
  padding-bottom: 10px;
}
.flex.outer::before,.flex.outer::after {
  content: '';
  flex: 1;
}
.flex.inner {
  flex: 8;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.flex.inner > div {
  background: #eee;
  border: 1px solid #aaa;
  height: 100px; width: 100px;
  margin-top: 10px;
}

<div class="flex outer">
  <div class="flex inner">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Ответ 6

Рассчитайте разницу и добавьте margin-left в левый элемент, а margin-right - в правый элемент. Хотя я знаю, что вам нужно решение HTML/CSS, вы можете сделать это с помощью JavaScript и сделать его максимально отзывчивым или просто почувствовать размеры полей с помощью HTML/CSS.

HTML

<div class="box" id="element"></div>
<div class="box"></div>
<div class="box"></div>

JS

window.addEventListener('load', setMargins);

var boxClass = document.getElementsByClassName('box');

function setMargins() {
    var element = document.getElementById('element');
    var widthOfElement = element.clientWidth;
    var sizeOfEachMargin = (window.innerWidth - (widthOfElement * 3)) / 4;

    for (var i = 0; i < boxClass.length; i++) {
        boxClass[i].style.marginLeft = sizeOfEachMargin + 'px';
    }
}