Flexbox en CSS CSS35

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.

Aperçu du conteneur flexible principal

Réglez les flex-items pour obtenir le résultat suivant :

Aperçu du réglage initial des flex-items

Disposition des flex-items

Réglez la boîte flexible pour obtenir le résultat ci-dessous.

Aperçu du conteneur flexible 1

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.

Aperçu du conteneur flexible 2

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.

Aperçu du conteneur flexible 3

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.

Aperçu du conteneur flexible 4

Sens 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.

Aperçu du conteneur flexible 5

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.

Aperçu du conteneur flexible 6

Dimensions des flex-items

Dupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.

Aperçu du conteneur flexible 7

Dupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.

Aperçu du conteneur flexible 8

Dupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.

Aperçu du conteneur flexible 9

Dupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.

Aperçu du conteneur flexible 10

Dupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.

Aperçu du conteneur flexible 11

Utilisation des deux axes

Dupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.

Aperçu du conteneur flexible 12

Dupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.

Aperçu du conteneur flexible 13

Dupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.

Aperçu du conteneur flexible 14

Dupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.

Aperçu du conteneur flexible 15

Dupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.

Aperçu du conteneur flexible 16

Dupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.

Aperçu du conteneur flexible 17

Dupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.

Aperçu du conteneur flexible 18

Ordre des flex-items

Dupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.

Aperçu du conteneur flexible 19

Dupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.

Aperçu du conteneur flexible 20

Dupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.

Aperçu du conteneur flexible 21

Ajout de flex-items

Modifiez le contenu HTML de la boîte flexible afin d’obtenir le résultat ci-dessous.

Aperçu du conteneur flexible 22

Dupliquez 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.

Aperçu du conteneur flexible 23

Dupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.

Aperçu du conteneur flexible 24

Dupliquez le HTML de la boîte flexible et effectuez les réglages permettant d’obtenir le résultat ci-dessous.

Aperçu du conteneur flexible 25