Cet exercice consiste à explorer les possibilités offertes par les boites flexibles en CSS.
Consignes de l’exercice
Mise en place de l’exercice
Créez un dossier racine.
Créez dans le dossier racine une page html nommée flexbox-css21.html.
Créez un fichier css dans le dossier racine sous le nom styles.css et liez-le à la page html.
Saisissez le code HTML permettant de reproduire le contenu de illustration ci-dessous en utilisant une flexbox ou boîte flexible. Le code sera par la suite dupliqué pour les différentes questions.
Afficher la solution HTMLAfficher la solution CSSRéglez les flex-items pour obtenir le résultat suivant :
Afficher la solution CSSDisposition des flex-items
Réglez la boîte flexible pour obtenir le résultat ci-dessous.
Afficher la solution CSSDupliquez le HTML de la boîte flexible, personnalisez-la avec une classe et effectuez les réglages permettant d’obtenir le résultat ci-dessous.
Afficher la solution HTMLAfficher la solution CSSDupliquez le HTML de la boîte flexible, personnalisez-la avec une classe et effectuez les réglages permettant d’obtenir le résultat ci-dessous.
Afficher la solution CSSDupliquez le HTML de la boîte flexible, personnalisez-la avec une classe et effectuez les réglages permettant d’obtenir le résultat ci-dessous.
Afficher la solution CSSSens des flex-items
Dupliquez le HTML de la boîte flexible, personnalisez-la avec une classe et effectuez les réglages permettant d’obtenir le résultat ci-dessous.
Afficher la solution CSSDupliquez le HTML de la boîte flexible, personnalisez-la avec une classe et effectuez les réglages permettant d’obtenir le résultat ci-dessous.
Afficher la solution CSSDimensions des flex-items
Dupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.
Afficher la solution CSSDupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.
Afficher la solution CSSDupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.
Afficher la solution CSSDupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.
Afficher la solution CSSDupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.
Afficher la solution CSSUtilisation des deux axes
Dupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.
Afficher la solution CSSDupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.
Afficher la solution CSSDupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.
Afficher la solution CSSDupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.
Afficher un indiceAfficher la solution CSSDupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.
Afficher la solution CSSDupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.
Afficher la solution CSSDupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.
Afficher la solution CSSOrdre des flex-items
Dupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.
Afficher la solution CSSDupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.
Afficher la solution CSSDupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.
Afficher la solution CSSAjout de flex-items
Modifiez le contenu HTML de la boîte flexible afin d’obtenir le résultat ci-dessous.
Afficher la solution HTMLDupliquez le HTML de la boîte flexible modifiée précédemment et effectuez les réglages permettant d’obtenir le résultat ci-dessous.
Afficher la solution CSSDupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.
Afficher la solution CSSDupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.

Sauf mention contraire*, l'article Flexbox en CSS [CSS35] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International
Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.
* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.