Espacement des bloc avec flex CSS3

Bonjour,

Je me met (enfin) à l'utilisation des propriétés flex du CSS3. C'est top !
J'arrive à faire à peu près tout ce que je veux sauf un détail, mais ça n'est peut-être pas possible ?

J'ai une liste de blocs avec des tailles en % qui passent donc à la ligne lorsque ça dépasse la largeur du conteneur. Par exemple 50%-50% sur la première ligne 25%-25%-25%-25% passent sur la seconde ligne.
Tous ces blocs sont dans un conteneur unique en flex.
Jusque là tout va bien.

Pour la gestion des marges j'aimerais que le premier élément de la ligne n'ai pas de marge à gauche et le dernier n'ai pas de marge à droite en conservant un espacement entre chaque bloc au centre ...

Mon HTML est simple pour le moment mais je peux le faire évoluer sans problème si il y a une solution. Est-ce que c'est théoriquement possible ? Sans ajouter de classe ? Ça me permettrait de faire des listes flexibles et responsive en fonction du support ! Je peux le faire facilement en ajoutant des classes sur mes blocs de début et fin de ligne mais ça posera problème sur mobile si je veux afficher un bloc par ligne par exemple.

C'est clair ? Si quelqu'un a une idée, elle sera la bienvenue

Merci d'avance pour vos contributions.

C'est ma question qui n'est pas claire ou personne n'a la réponse ? Après d'autres tests j'ai l'impression que c'est insoluble à part en ajoutant des classes ... Mais bon ça complique un peu et limite la flexibilité !
Je continue à fouiller, si je trouve je me répondrai à moi même !

Merci à ceux qui tenterons de m'aider ou m'aiguiller

Bonjour,

Essaie ceci :

.container div{
    box-sizing : border-box;
}
.container div+div{
    margin-left : 10px;
}

Yordi
Modifié par Yordi (04 Feb 2014 - 11:31)

Merci pour la contribution !

J'ai déjà mis le border-box, en fait le css proposé ne marche que si je n'ai qu'une ligne ... Comme mes éléments felxible passent à la ligne, le premier élément de la deuxième ligne hérite aussi du margin-left.