Flexbox en CSS CSS21

Cet exercice consiste à explorer les possibilités offertes par les boites flexibles en CSS.

Consignes 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 suivant dans votre page html.

<div class="container">
    <div class="elem elem1">1</div>
    <div class="elem elem2">2</div>
    <div class="elem elem3">3</div>
    <div class="elem elem4">4</div>
    <div class="elem elem5">5</div>
</div>

Saisissez le code css permettant d’obtenir l’affichage suivant en utilisant une flexbox ou boîte flexible.

Aperçu des éléments alignés dans une flexbox

Adaptez le code css de la flexbox et/ou des flex-items pour obtenir le résultat ci-dessous.

Aperçu des éléments occupant tout l'espace

Adaptez le code css de la flexbox et/ou des flex-items pour obtenir le résultat ci-dessous. Chaque flex-item, sauf le premier, a une largeur correspondant exactement au double de la largeur du précédent.

Aperçu des éléments moitié moins large

Adaptez le code css de la flexbox et/ou des flex-items pour obtenir le résultat ci-dessous.

Aperçu des éléments répartis

Adaptez le code css de la flexbox et/ou des flex-items pour obtenir le résultat ci-dessous.

Gestion des alignements verticaux

Adaptez le code css de la flexbox et/ou des flex-items pour obtenir le résultat ci-dessous.

Aperçu pyramide inversée

Adaptez le code css de la flexbox et/ou des flex-items pour obtenir le résultat ci-dessous.

Aperçu plusieurs lignes

Adaptez le code css de la flexbox et/ou des flex-items pour obtenir le résultat ci-dessous.

Aperçu variation alignements

Cela peut vous intéresser :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.