CSS Flexbox vous permet de formater facilement votre HTML comme vous ne saviez jamais que c'était possible. Avec Flexbox, vous pouvez facilement aligner verticalement et horizontalement. Comme le son de ça? Ouais, moi aussi.
Flexbox est également très utile lorsque vous créez la mise en page générale de votre site Web ou de votre application. Il est facile à apprendre, bien pris en charge (dans tous les navigateurs modernes) et il est agréable de travailler avec - sans oublier qu'il ne faut pas longtemps pour obtenir les bases.
Alors plongons directement et apprenons-en plus.
Flexbox
Voici une liste des propriétés Flexbox qui peuvent être utilisées pour positionner des éléments dans CSS:
CSS qui peut être appliqué à un conteneur
display: flexbox | inline-flex; flex-direction: row | row-reverse | column | column-reverse; flex-wrap: nowrap | wrap | wrap-reverse; flex-flow: || justify-content: flex-start | flex-end | center | space-between | space-around; align-items: flex-start | flex-end | center | baseline | stretch; align-content: flex-start | flex-end | center | space-between | space-around | stretch;CSS qui peut être appliqué aux éléments / éléments dans un conteneur
order: ; flex-grow: ; /* default 0 */ flex-shrink: ; /* default 1 */ flex-basis: | auto; /* default auto */ flex: none | [ ? || ] align-self: auto | flex-start | flex-end | center | baseline | stretch;Alors maintenant, vous avez votre boîte à outils. Mais vous pourriez demander "Que dois-je faire avec mes outils et comment les utiliser?" Eh bien, laissez-moi vous montrer.
Display Flex
display: flex;dit simplement à votre navigateur, "hé, je voudrais utiliser Flexbox avec ce conteneur, s'il vous plaît." Cela initialisera cette boîte en tant que conteneur Flex et appliquera certaines propriétés Flex par défaut.
Voici à quoi ressemble notre conteneur sans display: flex;:
Après avoir ajouté, display: flex;nous obtenons ce qui suit - vous pouvez voir que les propriétés Flex par défaut sont appliquées, ce qui lui donne l'aspect suivant:
Direction du flex
flex-direction:nous permet de contrôler la façon dont les éléments du conteneur sont affichés. Les voulez-vous de gauche à droite, de droite à gauche, de haut en bas ou de bas en haut? Vous pouvez faire tout cela facilement en définissant la direction Flex du conteneur.
Flexbox applique les lignes par défaut pour la direction. Voici à quoi ils ressemblent tous:
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
Emballage flexible
Flexbox essaiera par défaut d'ajuster tous les éléments sur une seule ligne. Mais vous pouvez changer cela avec la propriété flex-wrap. Cela vous permet de choisir si les éléments vont déborder ou non.
Il existe 3 propriétés pour flex-wrap::
flex-wrap: nowrap est la valeur par défaut et essaiera de tout ranger sur une seule ligne de gauche à droite.
flex-wrap: wrap permet aux éléments de continuer à créer plusieurs lignes de gauche à droite.
flex-wrap: wrap-reverse permet aux éléments d'être sur plusieurs lignes mais s'affiche de droite à gauche cette fois.
Flex Flow
Flex flow combine l'utilisation de flex-wrapet flex-directionen une seule propriété. Il est utilisé en définissant d'abord la direction, puis l'enroulement.
flex-flow: column wrap; est un exemple pour savoir comment l'utiliser.
Justifier le contenu
justify-content est une propriété qui aligne les éléments du conteneur le long de l'axe principal (cela change en fonction de la façon dont le contenu est affiché).
Il existe plusieurs options pour cela. Cela nous permet de remplir n'importe quel espace vide en lignes mais nous permet de définir comment nous voulons le «justifier».
Voici nos options lorsque nous justifions notre contenu: flex-start | flex-end | center | space-between | space-around;.
Aligner les éléments
Aligner les éléments nous permet d'aligner les éléments le long de l'axe transversal. Cela permet au contenu d'être positionné de différentes manières à l'aide de la justification du contenu et d'aligner les éléments ensemble.
align-items: flex-start | flex-end | center | baseline | stretch;
Aligner le contenu
C'est pour aligner des éléments avec plusieurs lignes. Il sert à l'alignement sur l'axe transversal et n'aura aucun effet sur le contenu d'une ligne.
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
Autres ressources sur Flexbox et Grid
Articles et cours
La feuille de triche ultime CSS Flex
Cours vidéo CSS complet (comprend Flexbox et Grid)
Un guide visuel de CSS Flexbox
Comment créer une galerie d'images avec une grille CSS
Jeux et applis
Flexbox Defense est un jeu Web qui enseigne la flexbox de manière amusante.
Flexbox Froggy est également un jeu Web qui enseigne la flexbox de manière ludique.
Flexbox in 5 est une application Web qui vous permet de voir comment fonctionne flexbox avec quelques commandes simples.
Flexyboxes est une application qui vous permet de voir des exemples de code et de modifier les paramètres pour voir comment flexbox fonctionne visuellement.
Flexbox Patters est un site Web qui présente de nombreux exemples de flexbox.
Vidéos
Essentiels Flexbox
Exemples pratiques de Flexbox
Qu'est-ce que la Flexbox?!