Logo du LYPSO

Cascading Style SheetsFLEX BOX

Logo HTML5 et CSS3

Les Flex Box CSS (raccourci pour CSS Flexible Box Layout Module) sont un standard CSS3 de disposition des éléments dans une page web. Ce standard permet d'avoir un design adaptatif à l'écran. Les éléments peuvent être réagencés selon la taille de l'écran.
Le module des boîtes flexibles, a été conçu comme un modèle de disposition unidimensionnel et comme une méthode permettant de distribuer l'espace entre des objets d'une interface ainsi que de les aligner.
Lorsqu'on décrit les boîtes flexibles comme une méthode de disposition unidimensionnelle, on indique en fait que les flexbox gèrent une seule dimension à la fois : une ligne ou une colonne.

Présentation de toute la puissance de Flexbox

Les propriétés Flexbox en lignes

Les propriétés Flexbox en colonnes

Résumé de toutes les propriétés Flexbox

Apprendre à utiliser Flexbox

Le jeu Froggy la grenouille

Exercice 1 : Création d'une site structure Responsive

Présentation de l'exercice

Mise en place du HTML

Mise en place de la structure desktop first

Mise en place de la structure desktop first et mobile

Exercice 2 : Créer une mise en page de type journal

Mise en place du HTML

Finalisation avec les propriétés Flex-grow, Flex-shrink et Flex-basis

Exercice 3 : Création d'une barre de nav

Mise en place du HTML

Mise en page avec les propriétés Flex-grow, Flex-shrink et Flex-basis

Barre de nav Responsive

Création d'une page Web avec CSS Grid et CSS Flexbox

Présentation des résultats attentus

Mise en place des balises structurantes HTML et de CSS Grid

Mise en place des Media Queries pour une page Web responsive

Ecrire le header du desktop et mobile

Ecrire la section

Ecrire la nav du desktop et mobile

Ecrire le footer du desktop et mobile

Ecrire la zone article du desktop et mobile