TUTO Flexbox : mise en page flexible en CSS

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.