Partie 2

Sommaire

Résumé de la première partie
Flex-direction
- Changement d'axe
- Main-axis et Cross-axis
Challenge
- Correction
Flex-wrap

Résumé rapide de la première partie

Dans la première partie, nous avons vu l'importance de l'utilisation de flexbox, ainsi que les fondamentaux de l'alignement et de l'espacement. Pour ceux qui ne l'ont pas encore lu, je vous invite quand même à faire le petit défi pour être sûr que tout sois compris.

Pour lire cet article, rendez-vous ICI.

Vous avez tous votre tasse de café / thé ? Alors commençons ☕ !

Changeons d'axe avec flex-direction !

Dans la première partie, je vous ai parlé de justify-content et nous avions vu qu'elle nous permettait de gérer l'espacement de nos éléments sur la largeur disponible, mais savez-vous que nous pouvons l'utiliser aussi pour gérer l'espacement vertical ? Eh bien flex-direction va nous aider dans cette tâche.

Par défaut, quand vous déclarez display: flex; sur votre élément, flex-direction a la valeur row (ligne en anglais), et c'est pour cela que nos éléments se mettent côte-à-côte car, même si vous ne l'avez pas écrit, la propriété est bien présente.

justify-content fonctionnera sur cet axe (l'axe horizontal) mais si l'on change la valeur de flex-direction à column alors, justify-content agira sur l'axe vertical.

Pour illustrer cela, nous allons reprendre la base des exercices de notre premier article.

Voici la base de nos prochains exemples :

<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 class="flex_container__child" id="yellow"></div>
</div>

.flex_container {
  /** FLEXBOX ***/
  display: flex;
  flex-direction: row; /* Présente par défaut, vous n'êtes donc pas obligé de l'écrire tant
		que la valeur est "row" */
  /***************/
  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;
}

Les curieux qui ont supprimé la ligne flex-direction: row; ont surement remarqué que cela ne changeait rien du tout. Effectivement, comme je vous l'ai dit plus haut, à partir du moment où un élément devient flexible grâce à display: flex, alors flex-direction: row est automatiquement présent, mais il est invisible. Pour une <div></div>, nous n'avons pas besoin d'écrire display: block car c'est son comportement par défaut, et bien là, c'est exactement pareil. Quand vous déclarez un élément en "flexible", alors l'axe principal (flex-direction) sera horizontal (row).

Et si nous changions la valeur de flex-direction à column ?

Les éléments enfants se mettent en colonne ! Bon d'accord ce n'est pas très impressionnant, mais ne vous y trompez pas, car il n'y a pas que cela qui change, l'axe principal (main-axis) est désormais vertical.

Nous allons maintenant utiliser notre propriété justify-content, vu dans notre premier article pour espacer nos éléments.

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

Nos éléments s'espacent verticalement ! Et c'est peut-être un détail pour vous, mais pour moi ça veut dire beaucoup. 😃 ! Bon d'accord, j'arrête... Cela signifie que justify-content espace nos élements en fonction de l'axe principal.

Je vous mets une illustration qui vous parlera certainement un peu plus.

Main-axis et Cross-axis

Si vous trouvez les explications un peu barbares, c'est tout à fait normal et ne vous inquiétez pas, je vais faire de mon mieux pour que tout le monde comprenne.

Avec flex-direction: row l'axe principal est celui par défaut de n'importe quel élément flexible, horizontal. C'est donc pour cela que quand nous rendons un élément flexible, nos éléments se mettent côte-à-côte. La propriété justify-content suivra toujours cet axe pour espacer nos éléments.

Les propriétés align-items et align-self suivront toujours le cross-axis pour le placement des éléments.

Comme vous le voyez, avec flex-direction: column l'axe principal s'inverse avec le cross-axis. Cette fois, justify-content agira toujours sur l'axe principal, donc verticalement, et align-items ou align-self agiront toujours sur le cross-axis, c'est-à-dire horizontalement.

GARDER CELA À L'ESPRIT DANS TOUTES VOS MISES EN PAGE SOUS PEINE DE FRUSTRATION 😃.

J'ai cru entendre un son que je connais bien... CHALLENGE !

Pour ce petit challenge, je veux que vous reproduisiez l'image ci-dessous. Je ne donne pas plus de précisions, car sinon on va me dire que je suis trop gentil avec vous 😅. Pour le code de départ, je vous conseille de le refaire entièrement (1 carré de couleur 500px de largeur et de hauteur qui sera parent de 4 carrés de couleurs différentes de 100px de largeur et de hauteur) ou de prendre celui en début d'article juste ici.

Je vous invite, pour ce défi, à n'utiliser que flex-direction: column histoire de vous entrainer un peu avec toutes ces histoires d'axes 😃. Attention donc au comportement par défaut d'un élément flexible qui reviendrait à écrire flex-direction: row.

Image du défi

Tic…. Tac… Tic… Tac…

Posez les claviers... Correction !

Alors tout d'abord si vous avez eu un peu de mal ce n'est pas grave du tout, il y a différentes techniques pour apprendre à découper une "maquette" (le mot est peut-être un peu fort haha). Si vous avez réussi alors bravo à vous.

ÉTAPE 1 :

Reprenons notre code de départ.

<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 class="flex_container__child" id="yellow"></div>
</div>

.flex_container {
  display: flex;
  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;
}

Nous pouvons constater qu'il nous manque notre carré orange qui sera parent de 3 éléments (dans notre exemple, il sera parent du carré bleu, rouge et vert). Je commence déjà par insérer mon cube dans mon HTML et mon CSS.

<div class="flex_container">
  <div class="flex_container__child_wrapper" id="orange">
    <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>
  <div class="flex_container__child" id="yellow"></div>
</div>

.flex_container__child_wrapper {
  width: 300px;
  height: 300px;
}

#orange {
  background-color: orange;
}

ÉTAPE 2 :

Maintenant que tous nos éléments sont présents, nous remarquons que nos éléments enfants (bleu, rouge et vert) ne se mettent pas côte à côte, nous pouvons donc en déduire que leur élément parent n'est pas flexible (car le comportement par défaut d'un élément flexible est de mettre les éléments en ligne, vous vous rappelez ? flex-direction: row).

Je vous avais demandé aussi de n'utiliser que flex-direction: column, de ce fait, laisser le comportement par défaut (sur le carré orange, mais aussi sur le violet) revenait à laisser mettre flex-direction: row. Nous pouvons donc mettre à jour nos éléments.

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

.flex_container__child_wrapper {
  /** NOUVEAU **/
  display: flex;
  flex-direction: column;
  /****************/
  width: 300px;
  height: 300px;
}

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

#blue {
  background-color: blue;
}

#red {
  background-color: red;
}

#green {
  background-color: green;
}

#yellow {
  background-color: yellow;
}

#orange {
  background: orange;
}

ÉTAPE 3:

Maintenant passons aux espacements, mais reprenons d'abord la capture d'écran du défi et essayons de découper cela.

Découpage des enfants du carré violet

Notre carré violet contient deux enfants directs (le carré orange, contenant lui-même trois enfants, et le carré jaune) et nous savons d'eux qu'ils s'afficheront en colonne, et que la propriété justify-content peut nous aider dans cette tâche. Il n'y a pas d'espaces entre les bordures et nos enfants, nous pouvons donc en déduire qu'il s'agit d'un justify-content: space-between si vous avez bien suivi le premier article 🙂.

.flex_container {
  display: flex;
  flex-direction: column;
  /* NOUVEAU */
  justify-content: space-between;
  /**************/
  width: 500px;
  height: 500px;
  background-color: #892be299;
}

.flex_container__child_wrapper {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 300px;
}

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

#blue {
  background-color: blue;
}

#red {
  background-color: red;
}

#green {
  background-color: green;
}

#yellow {
  background-color: yellow;
}

#orange {
  background: orange;
}

ÉTAPE 4 :

Maintenant passons aux alignements de tous nos éléments. Tous nos axes ont changé, car nous avons changé la valeur par défaut de flex-direction à column. Notre main-axis et notre cross-axis sont désormais inversés et si nous voulons aligner horizontalement nos éléments, nous allons donc utiliser la propriété align-self (sur l'élément directement). Il ne nous reste plus qu'à tous les aligner.

.flex_container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 500px;
  height: 500px;
  background-color: #892be299;
}

.flex_container__child_wrapper {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 300px;
}

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

#blue {
  background-color: blue;
}

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

#green {
  background-color: green;
  /* NOUVEAU */
  align-self: flex-end;
 /****************/
}

#yellow {
  background-color: yellow;
  /* NOUVEAU */
  align-self: flex-end;
  /****************/
}

#orange {
  background: orange;
}

Et voilà, le tour est joué, bravo à vous 🥳 !

Il y a encore quelque valeur à voir pour flex-direction, mais je n'ai pas besoin de vous faire un article dessus, car elles sont très intuitives, vous verrez.

VOIR LES AUTRES VALEURS DE FLEX-DIRECTION.

Mais ne croyez pas que l'article est fini, nous devons encore voir la propriété flex-wrap ensemble 😁.

Flex-wrap : non ce n'est pas comestible...

flex-wrap va vous permettre de gérer le fait de forcer les éléments à rester sur une seule ligne... ou pas. Effectivement si nous gardons nos quatre éléments enfants de base et que nous les dupliquons pour voir le comportement. Eh bien, par défaut, les éléments vont se forcer à rester sur une seule ligne, même s'ils doivent se déformer pour cela. Un petit exemple...

<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="yellow"></div>
  <div class="flex_container__child" id="blue"></div>
  <div class="flex_container__child" id="red"></div>
  <div class="flex_container__child" id="yellow"></div>
  <div class="flex_container__child" id="blue"></div>
  <div class="flex_container__child" id="yellow"></div>
  <div class="flex_container__child" id="red"></div>
  <div class="flex_container__child" id="yellow"></div>
</div>

.flex_container {
  display: flex;
  flex-wrap: no-wrap; /* comportement par défaut */
  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;
}

Mais si nous changeons la valeur de flex-wrap, alors les éléments vont garder leur taille respective et se mettre automatiquement à la ligne.

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

Il n'y a pas grand-chose à dire de plus sur flex-wrap mais il reste encore beaucoup de choses à dire sur flexbox, car il y a plein de propriétés que je garde dans ma manche pour d'autres articles.

Je vous remercie de m'avoir lu, et j'espère que vous aurez appris quelques subtilités de la propriété flex-direction.

Merci à Believemy de me permettre d'écrire des articles comme celui-ci.

À bientôt, surement 😉.