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.
Avis des apprenants