Le positionnement Flex

On a vu que les balises HTML de type block, comme les titres, la paragraphes et les articles, s’empilent comme des boites les unes au dessus des autres.

Impossible de les aligner les unes à côté des autres.
Mais alors, comment créer une mise en page évoluée et ne pas se résigner à une interface digne d’un site web de 1998, époque où tu n’étais même pas né ?

La réponse : avec FLEX !

display: flex;

Facile hein ?
En réalité, c’est un peu subtil. Étudions ça !

Un exemple de code minimal

Ce code va aligner les 5 div les uns à côté des autres. On t’explique tout sur la slide suivante.

    <section class="parent">
      <div class="enfant">Et prima </div>
      <div class="enfant">Vita est </div>
      <div class="enfant">Ut enim quisque </div>
      <div class="enfant">Quam ob </div>
      <div class="enfant">Minime hercule</div>
    </section>
      

      .parent {
        display: flex; 
      }
      
      

Pour placer des balises les unes à côté des autres, on ne va pas appliquer la commande display: flex; sur les balises concernées…

Mais sur la balise parent !

Et c’est une première bonne raison pour bien indenter son code.
L’indentation vous permet d’un coup d’œil de visualiser votre hiérarchie de balises pour savoir laquelle cibler. C’est à dire sur quelle balise vous allez appliquer le diplay: flex.

Le problème, c’est que l’algorithme Flex décide lui même de la dimension des balises HTML enfant en fonction de leur quantité de contenu.

Autrement dit, Flex prend des initiatives. Et en général, ça ne correspond pas à ce que voulez.

La solution ? La propriété width

Utilisez la propriété width sur les balises enfants pour imposer une largeur.
Notez qu’il existe une autre propriété plus ou moins équivalente : flex-basis , mais on ne va pas compliquer les choses.

    <section class="parent">
      <div class="enfant">Tattoine Eodem tempore Serenianus ex duce, cuius ignavia populatam in Phoenice Celsen ante rettulimus, pulsatae maiestatis imperii reus iure postulatus ac lege, incertum qua potuit suffragatione absolvi</div>
      <div class="enfant">Fiorina 161</div>
    </section>
      

.parent {
	display: flex; 
}

.enfant {
	width: 50%;
}

Et si on veut une largeur différente sur chaque enfant ?

On peut cibler chaque balise enfant spécifiquement, en utilisant une combinaison de classes par exemple (tu peux aussi utiliser des pseudo-classes nth-child ,va voir plus loin dans le cours).

    <section class="parent">

      <div class="enfant left">Tattoine Eodem tempore Serenianus ex duce, cuius ignavia populatam in Phoenice Celsen ante rettulimus, pulsatae maiestatis imperii reus iure postulatus ac lege, incertum qua potuit suffragatione absolvi</div>

      <div class="enfant right">Fiorina 161</div>
    </section>
      

.parent {
	display: flex; 
}

.enfant.left {
	width: 70%;
}

.enfant.right {
	width: 30%;
}

Note sur les combinaisons de classe

Vous pouvez très bien assigner deux classes différentes à une balise HTML : il vous suffit de séparer les deux noms de classe par un espace. Attention : ne mettez pas deux attributs class=""

.enfant.left {
	width: 30%;
}

Côté CSS, on colle les deux sélecteurs de classe l’un à l’autre sans espace.

Maintenant, vous savez aligner des balises, vous savez leur donner des dimensions. Il ne manque plus qu’une chose.

Créer de l’espace entre ces balises HTML !

Vous avez 3 techniques à votre disposition.
C’est à vous de choisir ce qui convient le mieux à votre mise en page.

1. La propriété gap pour créer une gouttière

La propriété CSS gap permet de déclarer l’espace qui sépare les blocs.

Cette propriété se déclare sur la balise parent.

    <section class="parent">

      <div class="enfant">Tattoine</div>

      <div class="enfant">Fiorina 161</div>

    </section>

.parent {
	display: flex; 
    gap: 40px;
}

.enfant{
	width: 50%;
    background-color: yellow;
}

2. La propriété justify-content pour créer des dispositions prédéfinies

Par exemple, vous voulez répartir équitablement 3 balises enfant sur toute la largeur, ou les aligner toutes à droite. Utilisez justify-content !

    <section class="parent">

      <div class="enfant">Tattoine</div>

      <div class="enfant">Fiorina 161</div>

      <div class="enfant">LV426</div>

    </section>

.parent {
	display: flex; 
    justify-content: space-between;
}

.enfant{
	width: 20%;
    background-color: yellow;
}

La valeur space-between permet de répartir sur toute la largeur les différentes balises.
Cette propriété se déclare sur la balise parent.

Essayez également les valeurs suivantes :

flex-end > aligne toutes les balises à droite
center > aligne toutes les balises au centre de la balise parent
space-around > un peu comme space-between mais pas pareil, on vous laisse tester

3. La propriété margin pour contrôler finement les espaces

Utilisez margin-left ou margin-right pour définir l’espace entre deux balises enfant lorsque gap ou justify-content ne suffisent pas pour construire précisément votre mise en page

    <section class="parent">

      <div class="enfant first">Tattoine</div>

      <div class="enfant second">Fiorina 161</div>

      <div class="enfant third">LV426</div>

    </section>

.parent {
	display: flex; 
}

.enfant.first {
	width: 200px;
    margin-right: 50px;
    background-color: yellow;
}
.enfant.second{
	width: 300px;
    margin-right: 150px;
    background-color: green;
}
.enfant.third{
	width: 100px;
    background-color: aqua;
}

Cette propriété se place sur les balises enfant.

Selon le motif de mise en page que vous souhaitez construire, on peut très bien combiner les propriétés margin, gap et justify-content.

Premier exemple : centrage + gouttières

Vous voulez centrer des blocs au milieu de la page avec des gouttières de 30 pixels entre chaque bloc.

    <section class="parent">
      <div class="enfant">Tattoine</div>
      <div class="enfant">Fiorina 161</div>
      <div class="enfant">Hott</div>
    </section>

.parent {
	display: flex; 
    justify-content: center;
    gap: 40px;
}

.enfant{
	width: 200px;
    background-color: yellow;
}

Second exemple : un logo central un peu décalé

Vous avez une navigation à gauche, un logo au centre et des boutons de partage à droite

    <section class="parent">
      <nav class="menu">Tattoine</nav >
      <img class="logo" src="logo.png" />
      <div class="sharers">...</div>
    </section>

.parent {
	display: flex; 
    justify-content: space-between;
}

.logo {
	width: 200px;
    margin-left: 50px;
}