Ce cheatsheet CSS flexbox complet couvrira tout ce que vous devez savoir pour commencer à utiliser flexbox dans vos projets Web.
La mise en page CSS flexbox vous permet de formater facilement du HTML. Flexbox simplifie l'alignement des éléments verticalement et horizontalement à l'aide de lignes et de colonnes. Les éléments «fléchiront» à différentes tailles pour remplir l'espace. Cela facilite la conception réactive.
CSS flexbox est idéal pour la mise en page générale de votre site Web ou de votre application. Il est facile à apprendre, est pris en charge dans tous les navigateurs modernes et il ne faut pas longtemps pour comprendre les bases. À la fin de ce guide, vous serez prêt à commencer à utiliser flexbox dans vos projets Web.
L'article comprend des gifs animés utiles de Scott Domes qui rendront flexbox encore plus facile à comprendre et à visualiser.
Toutes les propriétés CSS Flexbox
Voici une liste de toutes les propriétés CSS flexbox qui peuvent être utilisées pour positionner des éléments dans CSS. Ensuite, vous verrez comment ils fonctionnent.
CSS qui peut être appliqué au 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 le 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;Terminologie
Avant d'apprendre ce que font les propriétés flexbox, il est important de comprendre la terminologie associée. Voici les définitions des termes clés de la flexbox, tirées de la spécification officielle du W3C pour flexbox.
- axe principal: l'axe principal d'un conteneur flexible est l'axe principal le long duquel les éléments flexibles sont disposés. La direction est basée sur la propriété flex-direction.
- main-start | extrémité principale :Les éléments flexibles sont placés dans le conteneur en commençant du côté de départ principal et en allant vers le côté principal.
- taille principale : la largeur ou la hauteur d'un conteneur flexible ou d'un élément flexible, selon la dimension principale, est la taille principale de cette boîte. Sa propriété de taille principale est donc soit sa propriété de largeur, soit sa propriété de hauteur, selon celle qui se trouve dans la dimension principale.
- axe transversal : l'axe perpendiculaire à l'axe principal est appelé axe transversal. Sa direction dépend de la direction de l'axe principal.
- départ croisé | cross-end : les lignes flex sont remplies d'articles et placées dans le conteneur en commençant du côté de départ transversal du conteneur flex et en allant vers le côté cross-end.
- taille croisée : la largeur ou la hauteur d'un élément flexible, quelle que soit la dimension croisée, correspond à la taille croisée de l'élément. La propriété de taille croisée est celle de la «largeur» ou de la «hauteur» qui se trouve dans la dimension croisée.
CSS Display Flex
display: flex Cela indique à votre navigateur: "Je veux utiliser Flexbox avec ce conteneur, s'il vous plaît."
Un divélément par défaut est display:block. Un élément avec ce paramètre d'affichage occupe toute la largeur de la ligne sur laquelle il se trouve. Voici un exemple de quatre divs colorés dans un div parent avec le paramètre d'affichage par défaut:
Pour utiliser flexbox sur une section de votre page, convertissez d'abord le conteneur parent en conteneur flex en l'ajoutant display: flex;au CSS du conteneur parent.
Cela initialisera ce conteneur en tant que conteneur flex et appliquera certaines propriétés flex par défaut.
Direction du flex
flex-directionvous permet de contrôler l'affichage des éléments dans le conteneur. 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 le flex-directiondu conteneur.
La disposition par défaut après l'application display: flexconsiste à organiser les éléments le long de l'axe principal de gauche à droite. L'animation ci-dessous montre ce qui se passe quand flex-direction: columnest ajouté à l'élément conteneur.
Vous pouvez également définir flex-directionsur row-reverseet column-reverse.
Justifier le contenu
justify-contentest une propriété pour aligner les éléments du conteneur le long de l'axe principal (voir le diagramme de terminologie ci-dessus). Cela change en fonction de la façon dont le contenu est affiché. Cela nous permet de remplir n'importe quel espace vide sur les lignes et de définir comment nous voulons le «justifier».
Voici nos options les plus courantes utilisées pour justifier le contenu: flex-start | flex-end | center | space-between | space-around.
Voici à quoi ressemblent les différentes options:
space-betweendistribue les éléments de sorte que le premier élément soit aligné sur le début et le dernier sur la fin. space-aroundest similaire mais les éléments ont un espace d'une demi-taille à chaque extrémité.
Éléments d'alignement flexible
align-itemsnous permet d'aligner les éléments le long de l'axe transversal (voir le diagramme de terminologie ci-dessus). Cela permet au contenu d'être positionné de différentes manières en utilisant la justification du contenu et l'alignement des éléments ensemble.
Voici les options les plus courantes utilisées pour aligner les éléments: flex-start | flex-end | center | baseline | stretch
Pour stretchfonctionner comme vous le souhaitez, la hauteur des éléments doit être définie sur au autolieu d'une hauteur spécifique.
Cette animation montre à quoi ressemblent les options:
Nous allons maintenant utiliser à la fois justify-contentet align-items. Cela montrera la différence entre les axes principaux et les axes transversaux.
Alignez-vous
align-self vous permet d'ajuster l'alignement d'un seul élément.
Il a toutes les mêmes propriétés de align-items.
Dans l'animation suivante, le div parent a le CSS align-items: centeret flex-direction: row. Les deux premiers carrés parcourent différentes align-selfvaleurs.
Emballage flexible
Flexbox essaiera par défaut d'ajuster tous les éléments sur une seule ligne. Cependant, vous pouvez modifier cela avec la flex-wrappropriété. Il existe trois valeurs que vous pouvez utiliser pour déterminer quand les éléments vont vers une autre ligne.
La valeur par défaut est flex-wrap: nowrap. Cela fera que tout restera dans une rangée de gauche à droite.
flex-wrap: wrap permettra aux éléments de passer à la ligne suivante s'il n'y a pas assez de place sur la première ligne. Les éléments seront affichés de gauche à droite.
flex-wrap: wrap-reverse permet également aux éléments de passer à la ligne suivante, mais cette fois, les éléments sont affichés de droite à gauche.
Flex Flow
flex-flow combines the use of flex-wrap and flex-direction into one property. It is used by first setting the direction and then the wrap. Here is an example: flex-flow: column wrap;
Align Content
align-content is used for aligning items with multiple lines. It is for aligning on the cross axis and will have no effect on content that is one line.
Here are the options: align-content: flex-start | flex-end | center | space-between | space-around | stretch;
Vertically Centering with Flexbox
If you want to vertically center all the contents inside a parent element, use align-items. Here is the code to use:
.parent { display: flex; align-items: center; }Games and Apps
If you want to practice using flexbox, try out these games and apps that will help you master flexbox.
- Flexbox Defense is a web game where you learn flexbox while trying to stop the incoming enemies from getting past your defenses.
- Flexbox Froggy is a game where you help Froggy and friends by writing CSS code.
- Flexyboxes is an app that allows you to see code samples and change parameters to see how Flexbox works visually.
- Flexbox Patters is a website that shows off a bunch of Flexbox examples.
Conclusion
We've covered all the most common CSS flexbox properties. The next step is practice! Try making a few projects using flexbox so you can get used to how it works.