Flexbox CSS3 est un modèle de boîtes flexibles qui succède aux solutions de display "inline" et "float" pour gérer la disposition des éléments et structures des pages web.
Voici, un cours complet en ligne pour apprendre les concepts de base de Flexbox
Dans ce tuto Flexbox vous allez apprendre
- les options de direction et d'orientation (row et column)
- les options pour aligner des éléments dans un conteneur flexible et gestion des espaces disponibles (fluidité),
- Alignements et centrages horizontaux et verticaux, justifiés, répartis ...
- le contrôle de l'ordre avec la réorganisation des éléments indépendamment de l’ordre du flux (DOM),
- et, Distribution des éléments horizontale ou verticale, avec passage à la ligne autorisé,
Plusieurs démos sur:
- le conteneur flexible
- les propriétés flex
- la disposition des éléments flex en colonne et rangée
- les options d'alignement des éléments flex
- le contrôle de l'ordre des éléments flex
Des TP pour une mise en pratique rapide :
- des exemples et projets de mise en page, de simple à plus complexe, avec les propriétés Flex
- menu responsive flex, galerie d'images ...
Enfin, nous apprendrons à utiliser Bootstrap 4 avec Flex : un projet pour découvrir les bénéfices du CSS moderne et d'une mise en page contrôlée et facilitée grâce aux classes et utilities Flex de Bootstrap 4.
A la fin du cours un QCM vous sera proposé pour valider vos nouvelles connaissances. Vous aurez acquis de nouvelles compétences CSS et aurez abordés quelques projets pratiques.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions.
Bonne formation Flexbox.
Table des matières de cette formation CSS, Bootstrap (durée : 4h36m)
-
Bienvenue !
- Introduction gratuit 00:00:56
-
Présentation
- Histoire & Evolution de Flexbox gratuit 00:04:58
- Grille CSS 00:03:27
-
Démos - Flex properties
- Flex Direction : row et column 00:08:19
- Flex wrap 00:07:01
- Flex flow 00:08:22
- Flex Justify Content 00:09:18
- Flex Align Items 00:08:20
- Flex Align Content 00:04:53
-
Démos - Flex Items Properties
- Flex Order 00:04:17
- Flex Grow gratuit 00:03:27
- Flex Shrink 00:04:18
- Flex Basis 00:02:56
- Flex (shorthand) 00:04:15
-
[TP] - Flex en action avec TP, exercices, challenge et solutions
- 1) Flex Menu - introduction 00:02:55
- 1) Flex Menu - solution 00:06:44
- 2) Flex Images Gallery - introduction 00:02:58
- 2) Flex Images Gallery - solution - 1/2 00:07:26
- 2) Flex Images Gallery - solution - 2/2 00:06:09
- 3) Flex menu responsive - introduction 00:01:08
- 3) Flex menu responsive - solution 00:11:40
- 4) Flex Cards - introduction 00:07:11
- 4) Flex Cards - solution 00:15:37
- 5) Flex Pricing Grid - introduction 00:02:14
- 5) Flex Pricing Grid - solution 1/3 00:12:04
- 5) Flex Pricing Grid - solution 2/3 00:14:11
- 5) Flex Pricing Grid - solution 3/3 00:14:12
- 6) Flex Charts - introduction 00:02:26
- 6) Flex Charts - solution 00:17:47
-
[Projet] - Flexy Bootstrap Theme
- Projet de démarrage 00:07:23
- Navbar - flex align et justify content 00:05:50
- Navbar - flex order 00:03:01
- Navbar - flex et responsive 00:01:44
- Carousel - Flex alignement options 00:05:47
- Align Items 00:04:16
- Centered (vertical et horizontal) 00:09:53
- Content Flex basis 00:10:00
- Content Flex Wrap 00:02:39
- Gallery Flex 00:09:41
- Images Gallery Flex 00:01:48
- Flex responsive & order 00:09:30
- Footer & Final 00:05:22
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Sandy Ludosky
-
Très bon cours ! cela m'a permis de réviser mes flexbox, de me renforcer et même de m' enrichir dans ce domaine . Bravo pour ce travail !
-
Super tuto, très bien expliqué, avec pas mal d'exemples, et d'exercices pratique. Je recommande vivement !
-
Très bon tuto, clair et complet à la fois. Bravo Juste une remarque : peut-être éviter d'utiliser des termes anglais quand l'équivalent existe en français (mais je sais que le globish est la langue la plus parlée ..)
-
Avec quelle version de logiciel ce tuto est-il compatible ?vscode 1
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés