Flexbox : mise en page flexible en CSS
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO Flexbox : mise en page flexible en CSS

Carl Brison
24,00€
Acheter maintenant, payer plus tard. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Jamais le CSS n'aura été aussi facile pour positionner des éléments !
Flexbox est une technique très simple du CSS pour positionner tous les éléments d'un site Internet, exactement comme on le souhaite.

Un peu d'histoire

Je réalise des sites Internet depuis le début des années 2000. À cette époque, nous nous servions des tableaux HTML pour gérer la mise en page de nos sites !

Puis, de nouveaux supports pour naviguer sur le web sont apparus sur le marché : les smartphones et les tablettes. Il a alors fallu penser à un nouveau mode de mise en page afin que les sites Internet puissent s'adapter à ces nouveaux supports. De là, la mise en page par tableaux a été abandonnée au profit d'une mise en page basée sur le langage CSS.

Cependant, des propriétés CSS telles que FLOAT ne sont pas adaptées à la mise en page d'un site Internet. Et parfois, il peut même être extrêmement laborieux de mettre en page un site internet à l'aide des propriétés classiques du CSS. C'est d'ailleurs pour cela, que des frameworks tels que Bootstrap ont vu le jour ; pour aider les concepteurs de sites à réaliser des mises en pages plus facilement. Oui mais voilà, Bootstrap n'est pas une technique officielle et le CCS ne peut pas se faire voler la vedette par un framework !  D'où la naissance de Flexbox.
 

Au programme de cette formation Flexbox en vidéo

Dans ce tuto très complet, nous allons apprendre toutes les propriétés liées au Flexbox ainsi que toutes leurs valeurs.

Au dernier chapitre nous réaliserons le squelette d'un site internet totalement responsive en utilisant la technique des flexbox. Vous pourrez ainsi vous entrainer avec un atelier pratique. Un QCM complet est également fourni pour vérifier vos acquis. Je reste disponible dans le salon d'entraide pour répondre à vos questions ou bien si vous êtes bloqué dans le cours.

A la fin de ce tuto, je suis certain que vous ne pourrez plus vous passer de Flexbox !

Je préconise quelques petites connaissances en HTML ainsi qu'en CSS pour pouvoir bien apprécier ce cours ! Je mets à votre disposition une formation complète sur l'apprentissage du HTML5 & CSS3.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Les propriétés et leurs valeurs
Chapitre 2
Consolidation des nouveaux acquis
Chapitre 3
Création d'une maquette d'un site responsive

Plan détaillé du cours

Chapitre 1 : Les propriétés et leurs valeurs
1h16m
 
Leçon 1Une nouvelle valeur pour la propriété display
Leçon 2Différence entre un flex et un inline-flex
Leçon 3Définir la direction des contenus
Leçon 4Le retour à la ligne
Leçon 5L'axe principal et l'axe secondaire
Leçon 6Alignement sur l'axe principal
Leçon 7Faisons un petit récapitulatif de ce que nous savons
Leçon 8Alignement sur l'axe secondaire 1/2
Leçon 9Alignement sur l'axe secondaire 2/2
Leçon 10Alignement d'un contenu particulier
Leçon 11Alignement de plusieurs lignes ou colonnes
Leçon 12Gérer les ordres d'affichage
Leçon 13Augmenter la largeur d'un contenu
Leçon 14Diminuer ou définir la largeur d'un contenu
Chapitre 2 : Consolidation des nouveaux acquis
37m30s
 
Leçon 1Intro
Leçon 2Q.R. 1 à 4
Leçon 3Q.R. 5 à 8
Leçon 4Q.R. 9 à 12
Leçon 5Q.R. 13 à 16
Leçon 6Q.R. 17 à 20
Leçon 7Q.R. 21 à 24
Leçon 8Conclusion
Chapitre 3 : Création d'une maquette d'un site responsive
26m49s
 
Leçon 1Présentation du travail
Leçon 21ère partie
Leçon 32ème partie
Leçon 4Conclusion

Avis des apprenants

Détail des avis
117
Apprenants
28
Commentaires
5/5
Note moyenne
5/5
28
4/5
0
3/5
0
2/5
0
1/5
0
Valérie Arno
Valérie Arno
Publié le 24/12/2023
Retour en arrière pour une petite révision de flex-grow, flex-flow et flex-basis, order et autres détails oubliés. flex-grow, flex-flow et flex-basis ne sont pas parlant comme raccourcis, du coup je les zappe. Ils sont pourtant bien pratiques. Merci pour vos bonnes explications.
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil ;-)
Guillaume Duval
Guillaume Duval
Publié le 18/12/2023
encore un super tuto trés bien expliqué
Carl Brison
Carl Brison
Merci beaucoup, c'est vraiment très gentil ;-)
Alain Tardif
Alain Tardif
Publié le 02/01/2023
Excellent cours sur le flexbox, merci.
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire ;-)

Vos questions sur le cours

Avec quelles versions de logiciels ce tuto est-il compatible ?

CSS 3, HTML 5

Que contient le fichier source ?

Le code complet de l'exercice du chapitre 3.

Quel est le niveau requis pour suivre ce tuto ?

débutant

Payer plus tard

Prix d'achat : 24,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1353 tutos gratuits

Notre politique de protection des données