Accueil » Code » XHTML/CSS

Maîtrisez les Flexbox CSS - La mise en page responsive

  • Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

    Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

    La suite de cette vidéo est accessible après achat de la formation.
    previous
    summary
    resume
    next
    play
    Maîtrisez les Flexbox CSS
    00:00 / 00:43
    HD
    fullscreen
Maîtrisez les Flexbox CSS - La mise en page responsive
46:24
9 leçons
Jean Bernard André, formateur XHTML/CSS
Votre formateur XHTML/CSS Jean Bernard André
4.666665 5 0 3
3 avis
Objectifs
  • Maîtriser la mise en page grâce à la flexbox issue du CSS 3
Pre-requis
  • Connaissances du HTML 5 et CSS3

Détails de la formation

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.

Cette formation XHTML/CSS est également disponible dans les packs suivants

3 Notes et avis
Note moyenne:
4.666665 5 0 3
3
Donnez votre avis sur la formation Maîtrisez les Flexbox CSS - La mise en page responsive !
Vous devez acheter cette formation pour écrire des commentaires
youness gafa il y a 137 jours.
Votre note :
5 5 0 0
0

Fichiers de travail

Bonjour

En cliquant sur le lien "fichiers de travail" je suis automatiquement redirigé vers la page d'identification sans pouvoir télécharger les fichiers!
Yannick THOMAS il y a 307 jours.
Votre note :
5 5 0 0
0

Incroyable !

Je découvre une nouvelle méthode pour faire du responsive vraiment plus simple que la méthode traditionnelle. Merci beaucoup, vous avez l'art de parler de façon clair et précise. Ce qui facilite grandement la compréhension. De plus, la formation n'est pas trop longue, j'ai pu l'appréhender sur ma pause déjeuner. Encore merci ;-)
Saquet Jacques il y a 356 jours.
Votre note :
4 5 0 0
0

Saquet Jacques

Difficile de trouver l'onglet PREFERENCE dans le système camiuse afin d'installer le package de flexbox..

Merci de me donner la marge à suivre.

Cordialement, Jacques