Bien comprendre CSS3 Flexbox Layout Module.

Name: Bien comprendre CSS3 Flexbox Layout Module.
Rating: 5.0 (3 reviews)

Commentaires détaillés et TP.

Created byMichael Cornillon

Last updated 3/2024

French

What you'll learn

Comprendre CSS3 Flexbox Layout Module.
Savoir intégrer CSS3 Flexbox Layout Module.
Utiliser CSS3 Flexbox Layout Module pour créer une mise en page.
Aimer CSS3 Flexbox Layout Module !

Course content

4 sections • 38 lectures • 2h 23m total length

Structure de départ1:00
On se met d'accord sur les fichiers de départs:
- index.html: incontournable point d'entrée du serveur de dev,
- reset.css: trèèès petite remise à zéro de quelques propriétés CSS pour ne pas être embêté,
- style.css: le fichier dans lequel on va passer beaucoup de temps ! :)
Contenu HTML pour la réalisation des tests3:28
Structure HTML de départ.

Création d'une boîte flexible1:41
Comprendre ce qu'il se passe quand on transforme un élément en une boîte flexible.
Axe principale et axe secondaire2:10
La propriété flex-direction permet de régler 2 choses: l'orientation de la flexbox (horizontal/vertical) et la direction (vers la droite, la gauche, le haut ou le bas).
Positionnement des éléments sur l'axe principal3:47
Comprendre comment la flexbox peut décider de l'agencement des flex items sur l'axe principal.
Notions complémentaires sur les axes4:56
Ici, on enfonce le clou sur le concept d'axe, histoire de bien se mettre d'accord.
Comportement par défaut des flex items3:45
Comprendre le comportement par défaut des enfants directs d'une flexbox.
Gestion des lignes générées2:40
Comprendre comment gérer le débordement des flex items.
Gestion des lignes générées: saut de ligne au-dessus0:57
Comprendre comment modifier la direction sur l'axe principal.
Positionnement des élément sur l'axe secondaire2:46
Cette fois-ci, on s'intéresse à l'agencement des flex items sur l'axe secondaire.
Notions complémentaires sur le positionnement sur les 2 axes3:16
Comprendre le comportement d'une boite flexible concernant les tailles par défaut de ses éléments.
Remarques sur le comportement général d'une flexbox2:29
Comprendre le mode reverse et son impact sur l'ordre des flex items.
La valeur baseline4:15
Comprendre la valeur baseline de la propriété align-items.
Positionnement des lignes générées8:13
Comprendre comment agit la propriété align-content.

Réorganisation des éléments2:23
Ici, on modifie bouleverse allègrement l'ordre des enfants !
Positionnement autonome d'élément1:40
Comprendre comment un élément enfant peut décider de son comportement propre sur l'axe secondaire.
Réglage de la faculté d'un élément à s'étendre5:31
Comprendre le facteur de grossissement.
Notions complémentaire au "grossissement"1:39
Aller plus loin dans la compréhension du facteur de grossissement.
Distribution différente de l'espace restant7:17
Aller encore plus loin dans la compréhension du facteur de grossissement ! :D
Réglage de la faculté d'un élément à se rétrécir5:01
Comprendre le facteur de rétrécissement.
Gestion simultanée du rétrécissement/grossissement4:30
Comprendre d'autres concepts essentiels avec le grossissement et le rétrécissement.
Largeur vs rétrécissement prédéfinis (1)5:19
Comprendre l'utilisation simultanné du flex-shrink et de width.
Largeur vs rétrécissement prédéfinis (2)0:52
Aller plus loin dans la compréhension de l'utilisation simultané du flex-shrink et de width.
Prédéfinir une taille de départ (avant rétrécissement/agrandissement)3:46
Comprendre la propriété flex-basis.
La propriété flex5:28
Comprendre la propriété flex.
flex-basis vs (min|max) width3:11
Comprendre l'utilisation simultané du flex-basis et de width.
Evaluation connaissance sur Flexbox

Présentation de l'exercice1:26
Démonstration de l'objectif à atteindre.
Structure HTML5:22
Création des fichiers de démarrage.
Reset CSS1:10
Création d'un petit reset CSS, histoire de ne pas être embêter pour notre TP.
Réalisation d'une mise en page simple avec Flexbox
Style générale conforme à la maquette4:24
Création de la feuille de style avec des règles de départ.
Réglage du conteneur principal et astuce de positionnement9:11
Création de la flexbox.
Réglage du conteneur entre le haut et le bas de page3:58
Quelques réglages supplémentaires...
Choix des breakpoints pour l'adaptabilité multi écran3:33
Gestion de l'adaptabilité multi écran.
Comment faire lorsque le code est initialement prévu pour le bureau ?3:09
Adaptabilité pour les grands écrans.
Réglage de la vue smartphone4:59
Adaptabilité pour les écrans plus petits.
"Débuggage" de la vue de bureau1:54
Réglages supplémentaires pour la vue grand écran.
Réglage de la vue pour tablette6:15
Adaptabilité pour les écrans moyens.
Derniers réglages6:38
Retouche pour la vu écrans larges.

Requirements

Connaître les bases HTML et CSS.

Description

Bonjour et bienvenue dans ce module de formation !

Je suis Michael, formateur web indépendant et je vais vous accompagner pour vous faire aimer le modèle de boîte flexible. D'ailleurs qu'est-ce qu'une boite flexible en CSS ? Eh bien, comme son nom l'indique, il s'agit d'une boîte qui va nous permettre de faire du positionnement de manière incroyablement flexible !

Depuis 2012, l'arrivée de CSS3 Flexbox Layout Module a boulversé la façon de structurer nos sites/applications web.

Avant cela, il n'était pas évident de le faire et surtout de régler l'adaptabilité multi écran. Nous étions forcés de composer avec les outils à disposition alors, et on détournait des propriétés CSS de leur mission première pour pallier les manques. C'était à nous de bien réfléchir aux calculs nécessaires pour ne pas risquer de "casser le design" sur d'autres dispositifs (smartphones, imprimante, tablettes, etc.).

Flexbox renverse les rôles: plus besoin de calculs tordus ! Il suffit de déclarer au navigateur où l'on souhaite positionner nos éléments et hop, il n'y a plus qu'à admirer le résultat.

Malgré la simplicité de la boîte flexible, elle n'est pas toujours facile à appréhender quand on démarre. Il y a quelques aspects particuliers qui méritent d'être étudiés pour arriver à bien cerner les subtilités de la flexbox.

Vous ne connaissez pas CSS3 Flexbox Layout Module ? Vous connaissez mais n'avez pas eu le temps de vous y mettre ? Ou encore cela vous rebute ? Alors n'hésitez-pas et suivez cette formation !

Who this course is for:

Débutant, Faux débutant.
Développeur / intégrateur web n'ayant pas pris le temps de se former sur les Flexbox.

Bien comprendre CSS3 Flexbox Layout Module.

What you'll learn

Explore related topics

Course content

Mise en place du code de démarrage2 lectures • 4min

Propriétés CSS propres à la flexbox (conteneur: le flex container)12 lectures • 41min

Propriétés CSS propres aux éléments à positionner: les flex items12 lectures • 47min

TP: Réaliser une mise en page simple12 lectures • 52min

Requirements

Description

Who this course is for: