Ответ 1

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

Итак, замените это:

.flex > * { margin: 0 10px; }    
.flex > :first-child { margin-left: 0; }
.flex > :last-child { margin-right: 0; }

.flex.vertical > :first-child { margin-top: 0; }
.flex.vertical > :last-child { margin-bottom: 0; }

При этом:

.flex.vertical { margin: -20px 0 0 -20px; }
.flex > * { margin: 0 0 0 20px; }
.flex.vertical > * { margin: 20px 0 0 0; }

Ответ 2

вот еще один способ получить то же самое.

.vertical > div{ margin-bottom: 10px; }
.vertical > div:last-child{ margin-bottom: 0; }
.box + .box{ margin-left: 10px; }

Ответ 3

Хотя Rejoy answer работает отлично, он не готов к реагированию, поскольку строки заблокированы.

flex-flow твой новый друг. Тем не менее, flex не без ошибок. Трюк с отрицательным краем, который мы знаем из различных сеточных структур, работает, если только вы не в IE, где элементы оборачиваются слишком рано, потому что он использует content-box в качестве размера блока. Но есть простой обходной путь.

Рабочий пример: https://jsfiddle.net/ys7w1786/

.flex {
  display: flex;  
  flex-direction: row; /* let the content flow to the next row */
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin: -4px -4px; /* grid trick, has to match box margin */
}

Коробки поставляются с flex-basis: auto из-за IE. Но вместо этого мы можем просто использовать width:

.box {
    flex: 0 0 auto; /* auto is important because of an IE bug with box-size */
    height: 100px;
    display: inline-block;
    background-color: black;
    margin: 4px; /* spacing between boxes, matches parent element */
}

.s1-2{
  width: calc(50% - 8px); 
}
.s1-4{
  width: calc(25% - 8px);
}

Ответ 4

EDIT - я не предлагаю использовать этот подход, он взламывает. Я оставлю его здесь для потомков.

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

• Дайте каждой области прокладку 10px
• Установите цвет фона каждого региона в соответствии с цветом фона темы - в моем случае белый
• Создал div внутри каждого региона (чтобы создать иллюзию разницы между ними.

HTML выглядит так:

<div class="flexy">
    <div class="region">
       <div class="region-inner">
       </div>
    </div>
</div>

CSS выглядит так:

.flexy {
    display: flex;
    flex-wrap: wrap;
}

.flexy .region {
    box-sizing: border-box;
    flex-grow: 1;
    flex-basis: 0;
    padding: 10px;
}

Это оставляет мне такой макет (игнорируйте уродство, цвета только для демонстрации):

Есть несколько других добавленных классов, таких как "половинки", "трети" и "четверти", чтобы помочь реагировать на меньшие и/или более крупные экраны.

Ответ 5

Желаемая компоновка может быть достигнута с использованием обертки div с отрицательным запасом

.flex-wrapper{
    margin: -20px;
}

Рабочий код http://jsfiddle.net/8cju5jpd/

Ответ 6

Другой твердой точкой для использования Flex является то, что вы можете указать стратегию для использования для оставшегося пространства:

.container {
    justify-content: space-between;
}

Ответ 7

Пытаясь придерживаться вашего вопроса:

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

Я бы сказал, нет, так же, как вы не можете стилить элемент, основанный на значении, скажем, цвета фона. Для этого вы можете написать пользовательские классы, чтобы задать порядок гибки, а затем подкласс на их основе.

Пожалуйста, ознакомьтесь с этой интересной темой, где я разместил свое решение на расстоянии: лучший способ установить расстояние между элементами flexbox

Ответ 8

это плохо для создания фиктивного div/View для пробелов?

<Item style={{flex:1}} />
<View style={{width: 10}}
<Item style={{flex:1}} />

Ответ 9

CSS-спецификация была недавно обновлена для применения свойств gap к элементам flexbox в дополнение к элементам сетки CSS. Пока еще не все браузеры поддерживают это (только Firefox на момент написания; страница отслеживания ошибок для добавления его в Chrome находится здесь), но вскоре это можно сделать с помощью простого gap: 10px (или любой другой размер, который вы хотите) без необходимости работать с полями, :first-child, :last-child и т.д.