Pages

Les deux plaies de flex !

 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 ++