HackMD
Flex-Box - Créer une grille
Layout De 12 Colonnes Avec Flex-Box
Allons-y. Admettons que vous vouliez que chacune des <div> du HTML suivant occupe un tiers de la <section>.
Pour que ce soit un peu plus facile, j’ai ajouté quelques styles de base.
Par défaut, l’élément HTML <section> prend 100% de la largeur de l’écran. Limitons sa largeur à 740px et pendant que nous y sommes, ajoutons un peu d’espace autour des colonnes.
Essayez de réduire la fenêtre de votre navigateur jusqu’à ce que la largeur devienne inférieure à 740px et remarquez que <section> devient plus petit à mesure que l’écran se réduit, mais qu’il garde une largeur fixe lorsque la largeur de l’écran est supérieure à 740px.
Ajouter de la flexibilité
Transformons notre <section> en container flex comme nous l’avons appris .
Par défaut, flex-box règle la largeur des colonnes sur la taille de leur contenu.
Nous pouvons modifier ce comportement en utilisant les propriétés flex-grow et flex-shrink.
La propriété flex-grow indique à flexbox la façon dont il doit augmenter la taille de l’item pour occuper plus d’espace si nécessaire.
La propriété flex-shrink indique à flexbox comment réduire cette taille si nécessaire.
Pour en savoir plus, voir les articles suivants :
Comme nous voulons que nos colonnes se comportent de la même façon lorsqu’elles s’agrandissent ou se rapetissent, donnons à nos deux propriétés la valeur 1.
Notre conteneur flex-box contient maintenant 3 colonnes.
Les valeurs de flex-grow et de flex-shrink sont proportionnelles, ce qui signifie qu’elles changent en fonction des valeurs des autres items.
Flexbox fait la somme des valeurs données à chaque item, puis divise chaque valeur par cette somme.
Chaque colonne occupe donc 1 ÷ (1 + 1 + 1) soit 1/3 de l’espace total.
Que se passe-t-il si l’une des colonnes a une valeur différente ?
La première colonne prend la même quantité d’espace que les deux autres réunies.
La raison en est que la somme des valeurs est égale à 4, donc la première colonne occupe 2 ÷ (2 + 1 + 1), c’est à dire 1/2, et les deux autres occupent 1 ÷ (2 + 1 + 1), c’est à dire 1/4 de l’espace.
C’est une question de flex-basis
Si vous regardez attentivement le dernier exemple, vous verrez que la première colonne n’occupe pas tout à fait la moitié du container.
Si nous ajoutons plus de contenu à la troisième colonne, nous allons voir clairement le problème.
Que se passe-t-il ?? Pourquoi flexbox n’est-il pas flexible ?
Eh bien en fait, il se trouve que flexbox ne répartit pas l’espace de manière égale entre les colonnes.
Il cherche d’abord à savoir de combien d’espace chaque colonne a besoin, puis répartit l’espace qui reste via les propriétés flex-grow et flex-shrink.
C’est la propriété flex-basis qui a la responsabilité de déterminer l’espace de départ dont dispose un item avant que l’espace résiduel soit réparti.
Dans la mesure où nous ne nous soucions pas de l’espace d’origine, tout ce que nous avons à faire est de régler flex-basis sur la valeur 0 pour indiquer à flexbox qu’il doit ignorer la taille par défaut du container.
Encore plus de flex-basis
Si nous ajoutons une autre section sous la première, nous voyons tout de suite le problème :
Vous avez remarqué que les colonnes ne s’alignent pas ?
C’est parce que flexbox inclut le padding, les bordures et les marges dans le basis lorsqu’il calcule la taille que devrait faire l’item.
La première et la deuxième colonne de la deuxième rangée sont séparées par 22 pixels (20px pour la gouttière et 2px pour les bordures).
Nous pouvons ajouter cet espace manquant dans la première colonne de la première rangée en fixant flex-basis à 22px.
Ensemble, flex-grow, flex-shrink et flex-basis forment la pierre angulaire de la flexibilité de flexbox.
Comme ces propriétés sont très liées, flex propose une propriété raccourcie qui vous permet de régler les trois. Vous pouvez l’utiliser ainsi :
flex: <flex-grow> <flex-shrink> <flex-basis>;
Nous pouvons réécrire notre CSS :
