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 (dossier de travail) à l’emplacement de votre choix.

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.

Solution HTML :

Pour cet exercice, nous utilisons plusieurs classes pour chaque élément. Cette technique permet de limiter les répétitions de code.

Nous allons réunir sous une classe générique les propriétés de mise en forme communes aux différents éléments avec les classes container et item. Puis nous allons régler les spécificités des éléments avec des classes spécifiques item-a, item-b, item-c et item-d.

La classe container-1 n’a pas d’intérêt pour le moment mais nous permettra de traiter la question suivante en ajoutant des propriété de mise en forme spécifiques.

<div class="container container-1">
  <div class="item item-a">A</div>
  <div class="item item-b">B</div>
  <div class="item item-c">C</div>
  <div class="item item-d">D</div>
</div>
Solution CSS :
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");

body {
  background-color: #ccc;
  font-family: Montserrat, sans-serif;
}
.container {
  display: flex;
  border: 1px solid #666;
  background-color: #999;
  padding: 5px;
  margin: 20px 10px;
}
.item {
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  font-weight: bold;
}
.item-a {
  background-color: #21B7A3;
}
.item-b {
  background-color: #D3C62E;
}
.item-c {
  background-color: #D070D5;
}
.item-d {
  background-color: #428aff ;
}

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

Solution CSS :
.item {
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

Disposition sur l’axe principal des flex-items

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

Solution CSS :

La classe container-1 nous permet de traiter la question. Pour les questions suivantes, nous pourrons ainsi dupliquer le code HTML et changer le nom de cette classe pour distinguer les différents exemples.

.container-1 {
  justify-content: flex-end;
}

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.

Solution HTML :
<div class="container container-2">
  <div class="item item-a">A</div>
  <div class="item item-b">B</div>
  <div class="item item-c">C</div>
</div>
Solution CSS :
.container-2 {
  justify-content: space-around;
}

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.

Solution CSS :
.container-3 {
  justify-content: space-between;
}

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.

Solution CSS :
.container-4 {
  justify-content: center;
}

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.

Solution CSS :
.container-5 {
  flex-direction: column;
}

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.

Solution CSS :
.container-6 {
  flex-direction: row-reverse;
}

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.

Solution CSS :
.container-7 .item {
  flex-basis: 100px;
}

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

Solution CSS :

De nombreuses solutions sont possibles.

.container-8 .item {
  flex-basis: 25%;
}

.container-8 .item {
  flex-basis: 100%;
}

.container-8 .item {
  flex-grow: 1;
}

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

Solution CSS :
.container-9 .item {
  flex-grow: 1;
}
.container-9 .item-a,
.container-9 .item-d{
  flex-grow: 2;
}

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

Solution CSS :
.container-10 .item-a {
  flex-grow: 8;
}
.container-10 .item-b{
  flex-grow: 4;
}
.container-10 .item-c{
  flex-grow: 2;
}
.container-10 .item-d{
  flex-grow: 1;
}

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

Solution CSS :
.container-11 {
  flex-wrap: wrap;
}
.container-11 .item{
  flex-basis: 50%;
}

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.

Solution CSS :
.container-12 {
  height: 250px;
  align-items: flex-end;
}

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

Solution CSS :
.container-13 {
  height: 250px;
  align-items: center;
}

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

Solution CSS :
.container-14 {
  height: 250px;
  flex-direction: row-reverse;
  justify-content: space-around;
  align-items: center;
}

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

Indice :

Si les éléments ne s’étirent pas, cela peut venir de la hauteur qui leur a été attribuée.

Solution CSS :
.container-15 {
  height: 250px;
  justify-content: space-around;
  align-items: stretch;
}
.container-15 .item {
  height: inherit;
}

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

Solution CSS :
.container-16 {
  height: 250px;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}
.container-16 .item {
  width: inherit;
}

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

Solution CSS :
.container-17 {
  height: 250px;
  justify-content: space-between;
}
.container-17 .item-b {
  align-self: center;
}
.container-17 .item-c {
  align-self: flex-end;
}

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

Solution CSS :
.container-18 {
  height: 250px;
  flex-wrap: wrap;
  align-items: center;
}
.container-18 .item{
  flex-basis: 50%;
  justify-content: space-between;
}

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.

Solution CSS :
.container-19 {
  justify-content: space-between;
}
.container-19 .item-c {
  order: -1;
}
.container-19 .item-d {
  order: -2;
}

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

Solution CSS :
.container-20 {
  height: 250px;
  justify-content: space-between;
}
.container-20 .item-a {
  order: 1;
  align-self: center;
}
.container-20 .item-d {
  order: 2;
  align-self: flex-end;
}

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

Solution CSS :
.container-21 {
  flex-wrap: wrap;
}
.container-21 .item {
  flex-basis: 33%;
}
.container-21 .item-c {
  order: 1;
}

Ajout de flex-items

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

Solution HTML :
<div class="container container-22">
  <div class="item item-a">A</div>
  <div class="item item-b">B</div>
  <div class="item item-c">C</div>
  <div class="item item-d">D</div>
  <div class="item item-a">A</div>
  <div class="item item-b">B</div>
  <div class="item item-c">C</div>
  <div class="item item-d">D</div>
  <div class="item item-a">A</div>
  <div class="item item-b">B</div>
  <div class="item item-c">C</div>
  <div class="item item-d">D</div>
  <div class="item item-a">A</div>
  <div class="item item-b">B</div>
  <div class="item item-c">C</div>
  <div class="item item-d">D</div>
  <div class="item item-a">A</div>
  <div class="item item-b">B</div>
  <div class="item item-c">C</div>
  <div class="item item-d">D</div>
  <div class="item item-a">A</div>
  <div class="item item-b">B</div>
  <div class="item item-c">C</div>
  <div class="item item-d">D</div>
  <div class="item item-a">A</div>
  <div class="item item-b">B</div>
  <div class="item item-c">C</div>
  <div class="item item-d">D</div>
</div>

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.

Solution CSS :
.container-23 .item-b {
  order: 1;
}
.container-23 .item-c {
  order: 2;
}
.container-23 .item-d {
  order: 3;
}

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

Solution CSS :
.container-24 {
  height: 200px;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}

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

Solution CSS :
.container-25 {
  height: 200px;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start;
}
.container-25 .item-b, 
.container-25 .item-d {
  align-self: flex-end;
}
S’abonner
Notification pour
guest

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur la façon dont les données de vos commentaires sont traitées.

1 Commentaire
Le plus ancien
Le plus récent Le plus populaire
Commentaires en ligne
Afficher tous les commentaires
Aurélie
Aurélie
2 années il y a

Bonjour Julien,

Un grand merci pour ces exercices ! C’est un super travail
.
Une petite remarque sur l’exercice 5.4.
Si vous mettez  » .container-15 .item { height: inherit; « }, le « align-items: stretch » ne sert plus à rien.
En revanche, on peut utiliser « align-items: stretch » et remplacer height de .item par min-height.

Belle journée
Aurélie