Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Maîtrisez les Flexbox CSS
Revoir le teaser Je m'abonne
DescriptionProgrammeAvis
4,3

Flew grow et shrink des outils pour gérer la responsivité


24,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Maîtriser la mise en page grâce à la flexbox issue du CSS 3

Apprenez à utiliser la flexbox CSS pour créer des mises en page responsive

La « flexbox », aussi appelée "boîte flexible" en français, est un module de mise en page issue du CSS 3

Le but est de donner à un élément contenant (container) la possibilité de changer les largeur et hauteur des éléments contenus (items) pour remplir au mieux tout l'espace et s'adapter aux différentes tailles d'écrans (PC, tablettes, smartphones). Un container flexible permet aux items de s'étendre pour occuper toute la place ou à l'inverse les diminue pour leur éviter de dépasser et ainsi s'adapter à tous les devices.  

Le modèle flexbox offre une amélioration du modèle Block pour créer facilement des mises en page responsive design.

Vous démarrez cette formation sur les flexbox CSS par l'apprentissage de l'environnement de travail de votre projet HTML 5 et CSS 3 pour utiliser les Flexbox

Vous apprenez ensuite à utiliser la propriété CSS flex flow qui permet de positionner un élément à l'aide de directions ; Le flex flow suit l'axe principal ou l'axe perpendiculaire. 

Le formateur vous montre comment aligner vos éléments horizontalement et verticalement, définir l'ordre des éléments, gérer le responsive design à l'aide des outils Flew grow et Shrink et aligner chacun des éléments indépendamment de l'ensemble.

Ce cours vidéo sur le flexbox CSS se poursuit par des exercices pratiques vous permettant de maîtriser parfaitement ce module flexbox. Vous effectuez un premier exercice pratique vous permettant de créer grâce à la flexbox une navigation de site internet responsive

Un deuxième exercice pratique vous apprend à créer avec la flexbox une mise en page (layout) de site internet reponsive.

Dans un dernier exercice pratique, vous réalisez une mise en page pour navigation mobile avec un en-tête (header) et un pied de page (footer) fixes.

Voir plus

Information sur la leçon

Transcription de la leçon

Programme détaillé de la formation

Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
3 commentaires
4,3
3 votes
5
4
3
2
1
Maddj
Il y a 2 mois
Commentaire
Très bonne formation dans l'ensemble. J'ai rencontré un problème d'affichage sur la partie consacrée à la navigation mobile avec header et footer fixe. En effet, j'ai suivi à la lettre vos instructions, mais lorsque je valide dans mon fichier app.css la ligne de code suivante le texte de mon article disparaît :

flex: 1 1 0px;

Et lorsque je supprime cette ligne de code et bien le texte de l'article réapparaît, mais le header ne reste pas figer lorsque je scrolle.

Je ne comprends pas trop d'où pourrais venir le problème. Je tacherais de recommencer pour trouver la solution.
benedicte.bertran
Il y a 2 années
Commentaire
Explications pas à pas, simple, merci.
alain_nogues
Il y a 3 années
Commentaire
Très bon pédagogue
Explications claires
Nos dernières formations XHTML/CSS
  • Créer un site web avec HTML/CSS
    Découvrir
    Avant d'apprendre à développer et mettre en ligne votre propre site Internet, il est important de bien connaître les bases du HTML et du CSS. Dans cette formation en vidéo et cours en ligne, vous découvrez ce qu'est le HTML et CSS ? Le fonctionnement des sites web ainsi que la structure d'une page HTML.  Vous êtes guider pas à pas pour apprendre à intégrer des images, de l'audio et des vidéo. Vous apprenez à gérer et ajuster les polices en CSS, à comprendre la structure du CSS, les tableaux, boutons et formulaires en CSS.  Vous suivez la méthodologie de mise en page CSS et à styliser une page web avec le CSS. Formation pratique vous créez et stylisez les éléments principaux d'un site web avant de mettre en ligne et indexer un site, d'ajouter des éléments graphiques en CSS et d'animer un site en CSS
    16h20 14 leçons
  • Apprendre CSS 3
    Découvrir
    14h58 172 leçons 5 / 5
  • Apprendre HTML 5 - Les fondamentaux
    Découvrir
    Maîtriser les fondamentaux du language HTML5.
    5h11 101 leçons 3,67 / 5
  • Maîtriser Materialize CSS - Le framework pour le Material Design
    Découvrir
    Maîtriser le framework Materialize CSS pour faire du Material Design
    2h22 20 leçons
  • Maîtrisez le préprocesseur CSS : SASS
    Découvrir
    Apprendre à coder avec le préprocesseur CSS SASS
    1h33 14 leçons 5 / 5

éditeur de vidéos pédagogiques

Des supports pédagogiques en vidéo, produits avec les meilleurs experts. Dans nos studios à Paris, Lyon ou Montpellier. Vous souhaitez travailler avec nous ?
image-micro