Flex-boxes est une propriété CSS qui permet de placer vos éléments sur une page HTML. Je vous donne ci-dessous, un morceau de code qui présente la technique, qui m’est toujours bien utile dans la construction d’un site.
Si vous regardez à la ligne 16 de mon code, vous trouverez une mixin auto-préfixée qui met en place la propriété css « flex-boxes« . Je ne vais pas vous faire un cours sur les flex-boxes, vous trouverez un lien en dessous de cet article qui vous expliquera les énormes possibilités des flex-boxes. Mais pour résumer, il est possible avec cette propriété, de placer les éléments enfants soit en colonnes, soit en lignes et/mais surtout de les répartir automatiquement et ce, de plusieurs manières, sur leur largeur et leur hauteur.
Ici, j’ai choisi la valeur « space-around » de l’attribut « justify-content« . Cette propriété est très puissante, puisqu’elle répartit de façon égale les éléments sur la largeur à laquelle toute la ligne est cadenassée.
J’ai poussé le code un peu plus loin en énumérant (à la ligne 9) les largeurs possibles des colonnes que je permettrais dans ma galerie. Avec la technique scss each, j’incrémente chaque élément possible auxquels j’attache des propriétés. Dès lors, et en peu de lignes de codes, il est possible d’ajouter très facilement des colonnes aux largeurs parfaitement réparties.
Cliquez sur « scss » pour voir le code – et voilà le lien comme promis si vous voulez en savoir plus sur les flex-boxes : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://codepen.io/lintermediaire/embed/mdyByKG
