Bonjour ou bonsoir à vous, amis.ies codeurs.ses. Aujourd’hui, nous allons nous concentrer sur un petit truc magique qui s’appelle le “display:flex”. Pour ceux qui ne connaissent pas, c’est ce qui permet d’aligner deux ou plusieurs éléments sur une petite ligne, sans être obligé d’avoir recours au “position:absolute” ou même au “display:inline-block”. Parce que le dernier, on le connaît, on l’utilise tous beaucoup et même s’il est pratique dans la plupart des cas, il demande néanmoins d’être accompagné d’un “vertical-align” pour que tout soit bien aligné. Cependant, ça ne permet pas de centrer plusieurs éléments que l’on a alignés.

Par ailleurs, vouloir aligner est un souci lorsque l'on sait que la balise "center" est obsolète. Elle fonctionne, vous pouvez toujours l'utiliser; mais en préférera un "margin:0 auto" par exemple, pour que tout soit le plus optimal possible.

Pour correctement montrer la différence entre un “display:flex” et un “display:inline-block”, on va rendre les choses bien plus visuelles pour que ce soit clair.



Nous allons partir du principe qu’il y a deux blocs à aligner. Comme dit plus haut, c’est une variable que l’on va implanter à chaque bloc pour qu’il soit l’un à côté de l’autre. À noter que le HTML fonctionne ainsi : si on ne donne pas de position à un élément, il se mettra de base en haut à gauche, puis en bas, puis en bas, puis en bas, etc. En gros, tout se met l’un à la suite de l’autre dans le sens de la verticale. Mais ce que nous voulons aujourd’hui, c’est tout aligner dans le sens de l’horizontal sans devoir trop bidouiller. Le "display:inline-block" est donc ce que l’on utilise de base.

Code:

.un {
  width: 200px;
  height: 200px;
  background: red;
  display: inline-block;
}
.deux {
  width: 200px;
  height: 200px;
  background: lightblue;
  display: inline-block;
}

Nos deux blocs sont bien alignés l’un à côté de l’autre, mais pas centrés et dans un code type page d'accueil, c’est plutôt embêtant. Exemple, lorsqu’un bloc n’est pas à la même taille que l’autre, alors le bloc le plus petit se mettra au niveau du bas de l’autre.

Code:

.undd{width: 150px;
  height: 150px;
  background:red;
  display: inline-block;
}
.deuxdd{
  width: 100px;
  height: 100px;
  background: lightblue;
  display: inline-block;
}

Là encore, ça n’est pas pratique et pour que tout soit correct, il faut alors rajouter un “vertical-align:top”, ce qui dit en gros au code “ok t’es l’un à côté de l’autre, mais mets toi en haut comme tout bon HTML qui se respecte stp”.

Code:

.und{
  width: 150px;
  height: 150px;
  background: red;
  display: inline-block;
}
.deuxd{
  width: 100px;
  height: 100px;
  background: lightblue;
  display: inline-block;
  vertical-align:top;
}

Mais comme vous pouvez le voir, ça ne règle pas notre souci; les blocs ne sont pas centrés. Et c’est donc là qu’apparaît un outil magique.



Ici, nous allons commencer par le visuel que nous allons décortiquer pour l’expliquer.

Code:

.pa {
  width: 400px;
  background: grey;
  height: 200px;
  margin: 0 auto; /*on centre le conteneur*/
  padding: 5px; /*le padding ne sert qu'à correctement montrer le cadre gris de fond*/
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /*cette valeur permet de mettre au centre mais y'en a plein de dispo*/
}
.trois {
  background: lightgrey;
  width: 200px;
  height: 100px;
  padding: 10px;
  color: black;
  font-family: calibri;
  font-size: 20px;
}
.quatre {
  background: purple;
  width: 180px;
}
.cinq {
  width: 400px;
  background: pink;
}

Tout d’abord, on créé un conteneur général, ici appelé “.pa” (parce qu’en prenant l’exemple visuel d’une page d'accueil vous voyez de quoi je parle /PAN)

Sur notre conteneur, on applique le “display-flex”, ce qui dit au code : “tout ce qui se trouve dans ce bloc va s’aligner jusqu’à ce qu’on décide que ça soit plus le cas”.

Comme vous pouvez le voir, ça s’accompagne d’un “flex-wrap:wrap”. Ça dit “tu t'alignes mais tu dépasses de la width définie”, ce qui fait que tout ce qui dépassera se verra revenir à la ligne automatiquement. Sur l’exemple, le dernier bloc qui est trop grand pour s’aligner avec les deux premiers se retrouve donc automatiquement placé à la suite, mais en bas.

Et voilà, c’est tout. Grâce à ça, tous les blocs à l’intérieur d’un conteneur vont s’aligner sans que vous soyez obligé de les placer un par un et à la main, il n’y a plus qu’à appliquer divers “margin” et “padding” afin de rendre le tout un peu plus regardable. L’avantage, c’est que ça vous éviter d’appliquer un “display:inline-block” et un “vertical-align:top” à chaque bloc que vous voulez aligner et donc, ça vous fait gagner pas mal de place dans votre CSS. Parce que oui, on le rappelle, mais le CSS de Forumactif n’est pas infini et s’arrête aux alentours d’un peu plus de 3000 lignes de code.

(Croyez-moi, j’ai déjà atteint cette limite et vous avez pas envie de vous aussi voir vos premières lignes disparaître quand vous en rajoutez en trop)

Dernière petite chose, vous voyez que dans le code, se trouve un “justify-content: space-between”. Ça permet d’aligner les blocs tout en laissant un espace entre eux. En gros, le bloc de gauche restera collé à gauche, le bloc de droite restera collé à droite, quelle que soit la taille que vous avez décidé de leur donner. Exemple :

Code:

.pap {
  width: 400px;
  background: grey;
  height: 200px;
  margin: 0 auto;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.troisp {
  background: lightgrey;
  width: 200px;
  height: 100px;
  padding: 10px;
  color: black;
  font-family: calibri;
  font-size: 20px;
}
.quatrep {
  background: purple;
  width: 150px;
}
.cinqp {
  width: 400px;
  background: pink;
}

Okay, là on pousse un peu le bouchon mais croyez-moi, toucher à cette petite variable peut faire des miracles. Il existe donc pleins de “justify-content”, mais on va se concentrer sur les plus courants. Et sans exemple visuel sinon ce post va devenir beaucoup trop long et c’est déjà beaucoup trop long.

• justify-content: center > Centre les blocs à l'intérieur du conteneur

• justify-content: flex-start > Aligne les blocs tout à gauche

• justify-content: flex-end > Aligne les blocs tout à droite

• justify-content: space-between > Comme on l'a vu, ça permet de coller le bloc de gauche à gauche, et celui de droite à droite sans prendre en compte les largeurs données

• justify-content: space-around > Aligne les blocs de façon homogène, ils sont centrés mais auront le même margin à gauche et droite

• justify-content: space-evenly > Aligne les blocs de façon homogène mais garde le bloc de gauche à gauche et celui de droite à droite

Voilà ! Vous avez maintenant toutes les clefs en mains pour gagner un peu de place dans votre CSS et pour aligner correctement des blocs sans devoir vous prendre la tête pendant des heures. Maintenant, il ne vous reste plus qu’à vous amuser à bidouiller les variables histoire de voir ce que ça peut donner ~