À l'aide de marge sur flex éléments

J'étais sous l'impression que d'une marge peut être ajouté à la flexion des éléments/enfants, et flexbox doit automatiquement prendre en compte et calculer l'espacement correct entre les éléments.

Je n'arrive pas à le faire fonctionner comme je le voudrais bien.

Violon ici: https://jsfiddle.net/dba5ehcw/1/

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

De sorte que chaque flex point à l'heure actuelle est la moitié de la largeur du conteneur, et ils s'imbriquent parfaitement les uns à côté les uns des autres.

Je voudrais être en mesure d'ajouter une marge de dire, cadratin (1 em le flex-éléments afin de leur donner un peu de répit, mais ce faisant, ils deviennent de plus que les 50% et non plus de la pile à côté de l'autre sur la même ligne parce qu'ils sont trop larges.

Est-il un moyen d'utiliser la marge sur le flex-éléments et ont la flexbox conteneur de prendre en compte et de régler (diminution) de leurs largeurs en conséquence?

OriginalL'auteur Luke Twomey | 2015-09-24