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.

Voir le code par Julien Crego (@crego) sur CodePen.

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

Voir le code par Julien Crego (@crego) sur CodePen.

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.

Voir le code par Julien Crego (@crego) sur CodePen.

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

Voir le code par Julien Crego (@crego) sur CodePen.

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

Voir le code par Julien Crego (@crego) sur CodePen.

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

Voir le code par Julien Crego (@crego) sur CodePen.

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

Voir le code par Julien Crego (@crego) sur CodePen.

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

Voir le code par Julien Crego (@crego) sur CodePen.

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.