Использование поля для гибких элементов ⇐ CSS

[Anonymous]

У меня сложилось впечатление, что к гибким элементам/дочерним элементам можно добавить поля, и flexbox должен автоматически это учитывать и рассчитывать правильное расстояние между элементами.

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

Скрипка здесь: https://jsfiddle.net/dba5ehcw/1/

Код: Выделить всё

.flex-item{
border: 1px solid blue;
box-sizing: border-box;
height: 160px;
width: 50%;
}

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

Я хотел бы добавить к гибким элементам запас, скажем, в 1em, чтобы дать им некоторую передышку, но при этом они становятся больше, чем 50%, и больше не складываются рядом с друг друга на одной линии, потому что они слишком широкие.

Есть ли способ использовать поля для гибких элементов, чтобы контейнер flexbox учитывал это и соответствующим образом корректировал (уменьшал) их ширину?

Подробнее здесь: https://stackoverflow.com/questions/327 ... flex-items