Conseils et astuces CSS Flexbox

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;:

Terrain de jeu CSS pas de propriétés 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:

Style par défaut d'affichage de la cour de récréation CSS

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: ligne;  exemple

flex-direction: row-reverse;

flex-direction: exemple d'inversion de ligne

flex-direction: column;

flex-direction: exemple de colonne

flex-direction: column-reverse;

flex-direction: exemple de colonne inversée

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?!