Vous êtes sur la page 1sur 1

CSS 3 et Flexbox

Les feuilles de style en cascade, généralement appelées CSS de l'anglais Cascading Style Sheets,
forment un langage informatique qui décrit la présentation des documents HTML et XML. CSS 3 est la
dernière norme CSS qui existe.
Les boîtes flexibles, ou flexbox, sont un nouveau mode de mise en page dans CSS3. L'utilisation de
flexbox permet d’adapter la mise en page à différentes tailles d'écran et à différents dispositifs
d'affichage.

Container Flex
Objet Flex

Axe transversal

Début de l’axe transversal

Axe principal

Début de l’axe transversal


Début de l’axe principal Fin de l’axe principal

Utiliser flex

disaplay: flex; sur le container


Par défaut, les objets sont alignés en lignes

Comment voulez-vous aligner vos objets ?

En lignes En colonnes
flex-direction: row; sur le flex-direction: column; sur le
container container

Ou en inversant les objets à l’interieur du container

flex-direction: row-reverse; sur le flex-direction: column-reverse; sur le


container container

Comment voulez-vous placer vos objets sur l’axe principal ?

justify-content: flex-start; sur le container


C’est la valeur par défaut

Ou

justify-content: flex-end; sur le container

Ou

justify-content: center; sur le container

Ou

justify-content: space-between;
sur le container

Ou

justify-content: space-around;
sur le container

Et sur l’axe transversal ?

align-items: stretch; sur le container


C’est la valeur par défaut

Ou

align-items: flex-start; sur le container

Ou

align-items: flex-end; sur le container

Ou

align-items: center; sur le container

Ou

align-items: baseline; sur le container

Si le contenu est sur plusieurs lignes, comment


voulez-vous l’afficher ?

align-content: stretch; sur le container


C’est la valeur par défaut

Ou

align-content: flex-start;
sur le container

Ou

align-content: flex-end;
sur le container

Ou

align-content: center;
sur le container

Ou

align-content: space-between;
sur le container

Ou

align-content: space-around;
sur le container

Voulez-vous changer l’ordre des éléments ?

NON OUI

Trés bien, ne faites rien. order: <whole number>;


C’était facile :) sur l’élément

Voulez-vous changer la taille de certains éléments ?

NON OUI

Trés bien, ne faites rien. flex-grow: <whole number>;


C’était facile :) sur l’élément

Voulez-vous aligner certains éléments différemment des autres ?

NON OUI

Trés bien, ne faites rien.


C’était facile :) align-self: flex-start;
sur l’élément

Ou

align-self: flex-end;
sur l’élément

Ou

align-self: center;
sur l’élément

Ou

align-self: baseline;
sur l’élément

Ou

align-self: stretch;
sur l’élément

Voulez-vous aligner les éléments sur une ligne


ou les passer sur une autre lors du recadrage

Sur la même ligne Sur une autre ligne

flex-wrap: nowrap; flex-wrap: wrap;


sur le container sur le container

Ou

flex-wrap: wrap-reverse;
sur le container

Tester vos connaissances


Avec un mini-jeu : http://flexboxfroggy.com

Avec un quizz : https://www.alsacreations.com/quiz/lire/23-CSSFlexbox

Alexis Bouchard et Younes Hamdoune

Vous aimerez peut-être aussi