FLEXBOX - Apprendre les bases

Partie 1

Sommaire

• Présentation
• Utilisation
  • Alignement horizontal
  • Alignement vertical
• Challenge
  • Défi bonus

Présentation

Flexbox est le diminutif de Flexible Box Layout. Alors flexbox qu'est-ce que c'est ? Eh bien, c’est une propriété qui permet de rendre notre élément flexible.

Et comme cela veut tout et rien dire, alors un exemple s’impose. Je crée une <div></div> avec la class flex_container qui fera 500 px de largeur et de hauteur et qui sera de couleur violette.

<div class="flex_container"></div>

.flex_container {
  width: 500px;
  height: 500px;
  background-color: #892be299;
}

Commençons à jouer avec Flexbox. Pour commencer ajoutons la propriété display: flex; à notre carré violet. Voyez-vous une différence ? Non ? Eh bien, cela est tout à fait normal, car la propriété en question ne s’utilise que sur l’élément parent et comme notre carré ne contient rien eh bien rien ne se passe.

Effaçons notre propriété et ajoutons trois enfants à ce carré, les trois de couleurs différentes.

Utilisation

<div class="flex_container">
   <div class="flex_container__child" id="blue"></div>
   <div class="flex_container__child" id="red"></div>
   <div class="flex_container__child" id="green"></div>
</div>

.flex_container__child {
  width: 100px;
  height: 100px;
}

#blue {
  background-color: blue;
}

#red {
  background-color: red;
}

#green {
  background-color: green;
}

Nous constatons que nos trois éléments enfants se mettent l’un au-dessus de l’autre par défaut. Et si nous commencions à jouer avec flexbox ? Ça vous dit ?

Alors ajoutons notre propriété display: flex; à notre parent portant la classe flex_container.

.flex_container {
  /* FLEXBOX */
  display: flex;
  /************/
  width: 500px;
  height: 500px;
  background-color: #892be299;
}

L’élément parent devient flexible grâce à display: flex; donc les éléments enfants se mettent l’un à côté de l’autre.

Mais nous pouvons aller plus loin que cela, une fois que votre parent est flexible, il devient alors possible de jouer sur l’espacement occupé par nos enfants.

Alignement horizontal :

JUSTIFY-CONTENT: 

Il y a plusieurs choix possibles que je vais vous illustrer avec des capture d'écran.

SPACE-BETWEEN

justify-content: space-between;

Grâce à justify-content: space-between; je signale à mes enfants qu’ils doivent occuper tout l’espace disponible. Les enfants vont automatiquement se séparer pour occuper toute la largeur.

Information importante : La séparation entre chaque cube est égale.

SPACE-AROUND

justify-content: space-around;

Dans ce cas de figure, nous disons à flexbox: “Ok, je voudrais que les blocs soient espacés et ne soient pas collés aux bordures de notre carré violet”. Flexbox va alors espacer les carrés des bordures (à gauche et à droite) et mettre exactement le même espacement. Ensuite, il va espacer les éléments entre eux et mettre le même espacement. 

1. La différence avec la prochaine valeur est que l’espacement entre les cubes et l’espacement entre les bordures n’est pas égales.

2.  

SPACE-EVENLY

justify-content: space-evenly;

La différence ici est que flexbox va faire en sorte que la séparation entre les blocs et les bordures soient toutes égales.

Je vous mets le lien vers MDN pour voir la totalité des possibilités  →   ICI.

Alignement vertical : 

ALIGN-ITEMS

Il est vrai qu'aligner nos éléments horizontalement, c’est sympa, mais il faut pouvoir contrôler l’alignement vertical et pour cela j’invoque align-items .

CENTER

align-items sur votre parent permettra de contrôler l’alignement vertical de vos éléments enfants. Maintenant que nous savons ça, amusons-nous un peu et ajoutons une propriété dans notre flex_container .

.flex_container {
  /* Flexbox */
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  /***********/
  width: 500px;
  height: 500px;
  background-color: #892be299;
}

Les éléments enfants sont alignés au centre du parent.

Et voilà ! Nos éléments enfants sont parfaitement centrés grâce à align-items: center;  et parce que je ne suis pas un monstre, je vous en donne quelques une en plus 😉.

START

align-items: start;

Les éléments enfants sont alignés au début du parent.

END

align-items: end;

Les éléments enfants sont alignés à la fin du parent.

CHALLENGE :

"Oui, c’est bien beau tout ça, mais si je veux mettre un seul carré au milieu comment faire ?"

Pas de panique, car vous pouvez utiliser la propriété align-self sur un enfant pour le placer comme vous le souhaitez.
Je vous propose d’essayer de le faire tout seul. Si vous êtes un amoureux des formations de Believemy alors vous connaissez ce mot… Challenge.

Je veux que les trois carrés soient alignés diagonalement. Je souhaite le carré bleu au-dessus, le rouge au centre et le carré vert en bas.

Pour ce faire je vous donne un petit indice qui n’est pas si petit que ça. Comme son nom l’indique, align-self permet d’aligner verticalement l’élément lui-même, cette propriété ne s’utilise donc pas sur le parent, mais bien sûr l’enfant que l’on veut déplacer.

Tic…. tac… tic… tac…

Si vous avez réussi cet exercice eh bien bravo à vous, c’est que vous avez compris les premières bases de flexbox. Si vous n’avez pas réussi, ce n’est pas grave, essayez de reprendre l’article, de vous exercer sans regarder les captures d'écran.

"Correction ?"  Non… Défi bonus !

Pour ce défi bonus, je veux que vos carrés soient alignés de la même façon que le screenshot suivant :

Je vous conseille vivement d’enlever toutes les propriétés flexbox avant de commencer pour ne pas vous perdre.

Tic…. tac… tic… tac…

"Correction ?"  Cette fois oui 😀.

Alors pour notre premier challenge, il fallait tout simplement mettre align-self sur nos éléments enfants pour pouvoir faire une belle diagonale.

/* Ne pas oublier d'enlever la propriété align-items sur 
le parent, qui ne sert plus a rien car nous contrôllons déja tous ces enfants
un par un. */
.flex_container {
  align-items: center;
}

#blue {
  background-color: blue;
  align-self: start;
}

#red {
  background-color: red;
  align-self: center;
}

#green {
  background-color: green;
  align-self: end;
}

DÉFI BONUS :

ÉTAPE 1 :

Pour ce défi bonus, il fallait tout d’abord recréer un carré de couleur jaune. Pour cela, rien de plus simple.

<div class="flex_container__child" id="yellow"></div>

#yellow {
	background-color: yellow;
}

ÉTAPE 2:

Ensuite, je vous avais conseillé d’enlever toutes les propriétés flexbox pour ne pas vous emmêler les pinceaux comme on dit. Nous repartons donc depuis le début de notre css.

.flex_container {
  width: 500px;
  height: 500px;
  background-color: #892be299;
}

.flex_container__child {
  width: 100px;
  height: 100px;
}

#blue {
  background-color: blue;
}

#red {
  background-color: red;
}

#green {
  background-color: green;
}

#yellow {
  background-color: yellow;
}

ÉTAPE 3 :

Sur la capture d’écran, nous pouvons constater qu’il y a deux carrés en bas, nous pouvons dores et déjà mettre les propriétés display: flex; et align-items: end; sur notre parent. Si vous avez préféré contrôler vos éléments un par un, cela fonctionne aussi.

.flex_container {
  /*FLEXBOX*/
  display: flex;
  align-items: end;
  /*********/
  width: 500px;
  height: 500px;
  background-color: #892be299;
}

ÉTAPE 4 :

Il est venu le moment de l’espacement entre nos cubes. Sur la capture d’écran, nous constatons que l’espacement entre les bordures et nos cubes n’existe pas, donc nous pouvons assurément dire qu’il s’agit d’un justify-content: space-between; .

.flex_container {
  /*FLEXBOX*/
  display: flex;
  align-items: end;
  justify-content: space-between;
  /*********/
  width: 500px;
  height: 500px;
  background-color: #892be299;
}

ÉTAPE 5 :

Il ne nous reste plus qu’à déplacer notre cube rouge ainsi que notre cube jaune et comme nous souhaitons cibler ces deux éléments un par un nous utiliserons sur eux align-self .

#blue {
  background-color: blue;
}

#red {
  background-color: red;
  align-self: center;
}

#green {
  background-color: green;
}

#yellow {
  background-color: yellow;
  align-self: start;
}

Et voilà la tour est joué ! 🥳.

Bravo, nous possédons maintenant les bases de flexbox pour mieux aborder la suite !  🥳

Cet article n’est que le début d’une suite, car le sujet de flexbox est plutôt complexe à aborder dans un seul article et je ne veux pas vous perdre 🙂.

Dans la suite, nous aborderons flex-direction et flex-wrap et d’autres, je vous donne donc rendez-vous dans la partie 2.

Merci de m’avoir lu et à très bientôt sur Believemy !