У меня сложилось впечатление, что для flex-элементов/дочерних элементов можно добавить поле, и flexbox должен автоматически учесть это и вычислить правильное расстояние между элементами.
Я не могу заставить это работать так, как хотелось бы.
Скрипка здесь: https://jsfiddle.net/dba5ehcw/1/
.flex-item{
border: 1px solid blue;
box-sizing: border-box;
height: 160px;
width: 50%;
}
Таким образом, каждый элемент flex на данный момент составляет половину ширины контейнера, и они хорошо сочетаются друг с другом.
Я хотел бы иметь возможность добавить запас, скажем, 1em к элементам flex, чтобы дать им некоторое пространство для дыхания, но при этом они становятся больше 50% и больше не укладываются рядом друг с другом на та же линия, потому что они слишком широки.
Есть ли способ использовать поле на flex-элементах, чтобы контейнер flexbox учитывал это и соответственно корректировал (уменьшал) их ширину?