Apprendre Flexbox en 18 minutes (cours + exercices corrigés)

Flexbox ce n'est pas si compliqué !
Le principe de base de Flexbox c'est d'organiser des éléments dans un conteneur.
En appliquant, "display: flex" au conteneur, nous allons organiser les différents items à l’intérieur de ce conteneur.
Avant d’aller plus loin, ce qu’il faut comprendre, c’est le concept d’axe principale et d’axe secondaire. Vous pouvez, grâce à la propriété "flex-direction", préciser la direction dans laquelle vont s’organiser vos items à l’intérieur du conteneur. "flex-direction" est une propriété qui s’applique au conteneur.
- Si la direction est "row" et il faut savoir que c’est la valeur par défaut, c’est à dire que vous n’avez pas à la préciser pour qu’elle soit appliquée, alors l’axe principale sera l’axe horizontal et l’axe secondaire sera l’axe vertical.
- Si la direction est "column", alors l’axe principal sera l’axe vertical et l'axe secondaire sera l’axe horizontal.
Pour organiser nos éléments sur l’axe principal, il faudra utiliser la propriété “justify-content”. "Flex-start" est la valeur par défaut, cela signifie que les items seront alignés au début du conteneur.
Pour organiser nos éléments sur l’axe secondaire, il faudra utiliser la propriété “align-items”. "Stretch" est la valeur par défaut, cela signifie que les items vont prendre toute la place verticalement qu’ils peuvent prendre.
Par défaut, tous les éléments sont organisés sur une ligne, mais grâce à "flex-wrap", il est possible de préciser aux éléments qu’ils peuvent aller à la ligne.
Après avoir utilisé "flex-wrap", et uniquement si on utilise "flex-wrap", il est possible d’organiser nos éléments sur plusieurs lignes avec la propriété “align-content”. Cette propriété nous permet de préciser combien il y aura de places entre les lignes.
Toutes ces propriétés s’appliquent au conteneur, maintenant nous allons voir les propriétés qui s’appliquent aux items. En effet, il est possible de changer l’affichage de certains items en particulier.
Lorsque l’on réduit la taille de la fenêtre, nos items rétrécissent. Mais il est possible, pour un item en particulier d’annuler ce comportement en faisait "flex-shrink : 0;"
Il est aussi possible d’utiliser "flex-grow" si on veut préciser qu’un item doit prendre plus de place. En effet, lorsque nous agrandissons la fenêtre, nous avons de la place libre. Il est possible de dire à un élément de prendre cette place en utilisant "flex-grow: 1".
Bien entendu, il est possible d’appliquer cette propriétés "flex-grow" à plusieurs items.
"Flex-basis" permet de changer la taille de base qui est prise en compte par Flexbox.
Si vous voulez changer l’alignement sur l’axe secondaire d’un item en particulier, vous pouvez utiliser la propriété "align-self". Et on pourrait dire qu’on veut que cet item soit en "center" au lieu de "stretch" qui est la valeur par défaut.
La dernière propriété est la propriété "order" qui permet de changer l’ordre des items sans changer l’ordre dans le html.
-------------------------------------------------------------------------
🌍 Communauté & soutien :
- Rejoignez mon Discord (plein de bonus !) : / discord
- Soutenez-moi sur Patreon : / benbk
- Soutenez-moi avec un don en cryptos sur mon adresse Ethereum : 0x06fCEd3C170534fB5304724Df4aE0E3C5Ad2e111
⏱️ Chapitres :
0:00 : Introduction
1:02 : display: flex
1:22 : flex-direction : axe principal, axe secondaire
3:42 : justify-content
4:24 : align-items
5:15 : flex-wrap
6:00 : align-content
8:28 : flex-shrink
8:55 : flex-grow
9:52 : flex-basis
10:54 : align-self
12:09 : order
12:38 : exercice 1
13:00 : corrigé exercice 1
13:49 : exercice 2
14:08 : corrigé exercice 2
14:47 : exercice 3
15:14 : corrigé exercice 3
15:44 : exercice 4
16:18 : corrigé exercice 4
🔎 Liens super utiles :
- Apprenez Flexbox en jouant à un jeu : flexboxfroggy.com/#fr
- Tout comprendre sur Flexbox grâce à des schémas : css-tricks.com/snippets/css/a...
🤵 Je suis Ben BK, formateur en développement front-end, back-end et blockchain. Mon objectif ? Vous aider à devenir des développeurs Blockchain !
💭 Mes réseaux / Mon site :
Instagram : / imbenbk
Twitter : / benbktech
Site Web : benbk.io/
#flexbox #flex #display #direction #row #column #align-items #justify-content #start #end #exercice #corrigé #cours #grow #shrink #order

[@BenBK]

Si vous voulez deux liens super utiles pour vous exercer et vite retenir flexbox, n'hésitez pas à faire un tour dans la description de la vidéo. Bonne journée à tous !

[@bossgd100]

C'est très clair, merci

[@BenBK]

Merci à vous

[@rashaal7954]

Merci pour cette video 👍

[@MultiShokk69]

Super vidéo merci

[@cedric5979]

Nice le cours ! Très utile ! Good job !

[@BenBK]

Merci Cédric !