Flexbox en CSS CSS35

Publié le par Julien Crego
Mise à jour le

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
Afficher la solution HTML

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>
Afficher la solution CSS

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 :

Aperçu du réglage initial des flex-items
Afficher la solution CSS

Solution CSS :

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

Disposition des flex-items

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

Aperçu du conteneur flexible 1
Afficher la solution CSS

Solution CSS :

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

Aperçu du conteneur flexible 2
Afficher la solution HTML

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>
Afficher la solution CSS

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.

Aperçu du conteneur flexible 3
Afficher la solution CSS

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.

Aperçu du conteneur flexible 4
Afficher la solution CSS

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.

Aperçu du conteneur flexible 5
Afficher la solution CSS

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.

Aperçu du conteneur flexible 6
Afficher la solution CSS

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.

Aperçu du conteneur flexible 7
Afficher la solution CSS

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.

Aperçu du conteneur flexible 8
Afficher la solution CSS

Solution CSS :

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

Aperçu du conteneur flexible 9
Afficher la solution CSS

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.

Aperçu du conteneur flexible 10
Afficher la solution CSS

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.

Aperçu du conteneur flexible 11
Afficher la solution CSS

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.

Aperçu du conteneur flexible 12
Afficher la solution CSS

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.

Aperçu du conteneur flexible 13
Afficher la solution CSS

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.

Aperçu du conteneur flexible 14
Afficher la solution CSS

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.

Aperçu du conteneur flexible 15
Afficher un indice

Indice :

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

Afficher la solution CSS

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.

Aperçu du conteneur flexible 16
Afficher la solution CSS

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.

Aperçu du conteneur flexible 17
Afficher la solution CSS

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.

Aperçu du conteneur flexible 18
Afficher la solution CSS

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.

Aperçu du conteneur flexible 19
Afficher la solution CSS

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.

Aperçu du conteneur flexible 20
Afficher la solution CSS

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.

Aperçu du conteneur flexible 21
Afficher la solution CSS

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.

Aperçu du conteneur flexible 22
Afficher la solution HTML

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.

Aperçu du conteneur flexible 23
Afficher la solution CSS

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.

Aperçu du conteneur flexible 24
Afficher la solution CSS

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.

Aperçu du conteneur flexible 25
Afficher la solution CSS

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;
}

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

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.

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.