Dans le simulateur http://dupontcss.blogspot.com/p/test-grill.html écrire le CSS
.conteneur { display:flex; flex-wrap:wrap; } .conteneur> *{ flex:0 0 33.333333%}
👍Jusque là tout va bien ! Les trois blocs se partagent les 100% de largeur avec chacun une taille de 33.3333%.
La galère des bordures
Ajouter une bordure de 1px à un des blocs. La largeur va donc passer à 33.3333%+2px.
#it1 { border:1px solid; }
👎 l'ajout de la bordure a une conséquence évidente.
Il est hors de question de diminuer la largeur des blocs à 30% pour corriger ce débordement.
La solution consiste à écrire la règle box-sizing: border-box;
.conteneur> *{ 👍 box-sizing: border-box; flex:0 0 33.333333%}
La bordure fait maintenant partie de la boite et ne s'ajoute pas aux 33.3333%.
Autre galère la Marge !
Nous voulons simplement espacer nos blocs. Pour cela nous ajoutons une marge.
.conteneur> *{
box-sizing: border-box;
margin-left:10px;
flex:0 0 33.333333%}
👎Si on ajoute une marge pour espacer les boîtes il y a augmentation de la largeur.
Le problème de la marge est plus délicat. C'est un problème devenu classique et traité dans la littérature. La solution consiste à intégrer une gouttière.
Les gouttières
X-gap !
Tester ces solutions avec des %
Correction ++