Formation Découverte Du CSS : - Flexbox - Grafikart

• Tutoriels
• Cursus
• Formations
• Premium
• Blog
• Forum

• S'inscrire · Se connecter
• Afficher le menu

Tutoriels CSS Découverte du CSS Flexbox Formation Découverte du CSS : Flexbox Voir la vidéo

Les bases

Présentation 7 min Les sélecteurs 31 min Le modèle de boîte 34 min Police & textes 30 min Les formats de couleurs 11 min Les unités de mesures 17 min Le positionnement 19 min Les éléments flottants : float 20 min La propriété background 19 min Le box-sizing 4 min Flexbox 35 min

Mise en pratique

TP : Création d'un blog 1h16

Approfondir

La spécificité des sélecteurs 9 min La compatibilité des navigateurs 13 min Polices personnalisées 21 min Pseudo-éléments 19 min Transform 19 min Animation & Transition 19 min

TP Responsive

Media query et le "responsive" 33 min

TP Avancé

TP : Réseau social 1h37 TP Restaurant : Ouvrir la maquette 8 min TP Restaurant : L'en-tête 42 min TP Restaurant : Bloc présentation 38 min TP Restaurant : Menu 40 min TP Restaurant : Réservation 32 min TP Restaurant : Recettes & plan 37 min TP Restaurant : Footer 17 min TP Restaurant : Page recette 42 min Mini TP : Topbar 38 min

Aller plus loin

display: grid; 31 min Float, Flex ou grid ? 9 min Les frameworks CSS 20 min Reset & normalize 7 min Les variables CSS 11 min Les préprocesseurs CSS 7 min Images responsives 18 min Junior Télécharger les sources Télécharger la vidéo Description Sommaire À propos de ce tutoriel

Flexbox est un nouveau mode de mise en page (display) qui permet de disposer les éléments de manière plus flexible et de gérer de manière prévisible leur alignement quelque soit la taille de l'écran. Ce nouveau mode de disposition vient se positionner comme une amélioration du modèle block reposant sur les floats.

Liens utiles

• Documentation MDN
• Pratiquer gràce à FlexFroggy
• Guide visuel CSSTricks

Fonctionnement de base

Pour utiliser les flexbox il suffit de mettre un display:flex sur l'élément englobant plusieurs enfants. Les enfants directs se placeront alors les uns à côté des autres en essayant d'occuper tout l'espace disponible. Il est ensuite possible de piloter le comportement des enfants gràce à des propriétés comme flex-direction, flex-wrap, justify-content, etc...

Pour l'ensemble des propriétés disponibles je vous renvois vers cette page css-tricks.com qui résume très bien ces propriétés et leur effet sur les éléments en flex.

Compatibilité

Les flexbox sont supportées par tous les navigateur modernes sauf Internet Explorer (on commence à avoir l'habitude...)

• IE11 supporte assez bien les flexbox mais possède quelques bugs dans certains cas (cf caniuse.com)

Publié Technologies utilisées CSS Auteur : Grafikart Partager Proposer une correction

Les bases

Présentation 7 min Les sélecteurs 31 min Le modèle de boîte 34 min Police & textes 30 min Les formats de couleurs 11 min Les unités de mesures 17 min Le positionnement 19 min Les éléments flottants : float 20 min La propriété background 19 min Le box-sizing 4 min Flexbox 35 min

Mise en pratique

TP : Création d'un blog 1h16

Approfondir

La spécificité des sélecteurs 9 min La compatibilité des navigateurs 13 min Polices personnalisées 21 min Pseudo-éléments 19 min Transform 19 min Animation & Transition 19 min

TP Responsive

Media query et le "responsive" 33 min

TP Avancé

TP : Réseau social 1h37 TP Restaurant : Ouvrir la maquette 8 min TP Restaurant : L'en-tête 42 min TP Restaurant : Bloc présentation 38 min TP Restaurant : Menu 40 min TP Restaurant : Réservation 32 min TP Restaurant : Recettes & plan 37 min TP Restaurant : Footer 17 min TP Restaurant : Page recette 42 min Mini TP : Topbar 38 min

Aller plus loin

display: grid; 31 min Float, Flex ou grid ? 9 min Les frameworks CSS 20 min Reset & normalize 7 min Les variables CSS 11 min Les préprocesseurs CSS 7 min Images responsives 18 min