Marge für flexible Artikel verwenden ⇐ CSS

[Guest]

Ich hatte den Eindruck, dass Flex-Elementen/untergeordneten Elementen ein Rand hinzugefügt werden kann und Flexbox dies automatisch berücksichtigen und den korrekten Abstand zwischen den Elementen berechnen sollte.

Ich schaffe es allerdings nicht, das so zum Laufen zu bringen, wie ich es gerne hätte.

Fiddle hier: https://jsfiddle.net/dba5ehcw/1/

Code: Select all

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

Jeder flexible Artikel ist also im Moment halb so breit wie der Container und sie fließen gut nebeneinander.

Ich würde gerne einen Spielraum von etwa 1em zu den Flex-Items hinzufügen können, um ihnen etwas Luft zum Atmen zu geben, aber dadurch werden sie größer als die 50 % und können nicht mehr daneben gestapelt werden einander auf derselben Linie, weil sie zu breit sind.

Gibt es eine Möglichkeit, den Rand für die Flex-Elemente zu verwenden und den Flexbox-Container dies berücksichtigen zu lassen und ihre Breite entsprechend anzupassen (zu verringern)?