Un p’tit aperçu de Flex (HTML/CSS) pour vos présentations.

Pré-requis:

Avoir lu l'excellent tutoriel de Rael sur le HTML et CSS et surtout l'avoir bien assimilé ! Car je ne reviens pas sur les notions de CSS externes ou de HTML. De plus, ce n'est pas non plus à proprement parlé un tuto mais une rapide présentation du module Flex de CSS.

Lien vers le tuto de Rael:
https://les4royaumes.forumperso.com/t4633-tutoriel-html-et-css-pour-usage-sur-forumactif-debutants

Pourquoi Flex ?

Flex est un module de CSS qui permet la mise en page de site dit 'Responsive', c'est à dire que la page s'adapte en fonction de l'affichage du terminal (mobile, écran PC etc...). Oui mais quel intérêt sur un forum me direz-vous ? Et ben, aucun ! Si ce n'est un code plus simple, la modification de la mise en page se fait sans avoir à toucher à la structure HTML (Très gros point positif !) sans oublier la facilité de positionner les éléments (qui n'a jamais galéré pour centrer un élément horizontalement et surtout verticalement ?) et plein d'autres choses... Bien entendu on pourrait tout faire avec un bon vieux 'TABLE', enfin presque, mais imaginez, vous voulez ajouter une image (bien grande hein !) dans une cellule sans déformer le reste de votre tableau... Ben galère. Avec Flex, juste une modification dans votre CSS et l'affaire est dans le sac. Bref, Flex possède de nombreux avantages et ici je vous propose juste un aperçu de ses possibilités, si vous en voulez plus, à vous de creuser !

Pour bien commencer.

Ben tant qu'à faire les choses bien, autant TOUT faire bien !

La différence fondamentale avec Flex, c'est que votre contenu et COMPLÈTEMENT indépendant de votre mise en forme (la structure HTML). P'tit exemple, vous présentez un contenu sur un alignement vertical mais vous vous rendez compte que vous voudriez un alignement horizontale, facile. Dans votre CSS, suffit de changer l'attribut 'flex-direction: row' en 'flex-direction: column', et c'est tout ! Contrairement à une mise en page HTML plus classique, la structure du code HTML n'influe pas sur le rendu de votre page.

Donc, la première chose à bien comprendre pour réaliser votre mise en page, c'est de définir vos blocs d'informations (quelles informations mettre dans quel bloc) et ce complètement indépendamment de la mise en page. Ensuite, sur la CSS, vous positionnez vos blocs comme vous le désirez. Concrètement, vous mettez quoi dans chaque DIV, et une fois fait, vous faite votre mise en page complètement via votre CSS. Et c'est là que l'on s’aperçoit que Flex devient plus souple que 'TABLE' ou 'FLOAT'. Vous faite une mise en page de deux colonnes et vous vous rendez compte qu'une colonne supplémentaire serait la bien venue, un 'DIV' de plus dans le HTML et quelques attributs CSS à modifier (et encore sa dépend XD!) et le tour est joué. Une fois chaque bloc d'information défini, vous ne touchez normalement plus à votre code HTML (sauf pour rajout d'infos bien entendu).

Autre chose, finie les attributs dans le HTML: <- img src="mon/url" alt"" width="100px" height="100px"/ ->, toute les attributs doivent être définis dans la CSS. Cela parait contraignant mais à l'usage, ça prend tout son sens. Les deux attributs 'WIDTH' et 'HEIGHT' sont dorénavant dans la CSS.

Dernière chose, ne codez JAMAIS avec un traitement de texte mais utilisez un codeur (pour éviter des problèmes d'encodage de caractères entre les différents ISO, mieux vaut coder en UFT-8). Par exemple, un espace ne se code pas de la même manière sous Word que sous un traitement de texte de type UNIX, à l'écran c'est pareil mais pas au niveau du codage de ce caractère et votre navigateur risque de mal l'interpréter. Y en a un gratuit de chez crosoft, Visual Studio Code.

Bon, trêve de bavardage et passons à un exemple (par feignantise, j'vais reprendre un code existant...).

Présentation sur deux colonnes.

Prénom:Atuagaq.

Nom:Hiku.

Surnom:Aucun.

Peuple:Gorgoroth.

Caste:inconnu.

Métier:Corps diplomatique.

Date de naissance:1284.

Lieu de résidence:Hespéria.

Tenue vestimentaire habituelle.

En cours...

Traits de caractère.

En cours...

Détail du code HTML.

Code:

<div class="global" id="atuagaq">

<div id="bandeau">

<div id="avatar">
<img src="https://www.ellynn.fr/externe/istheria//images/pnj/atuagaq.jpg" id="vava">
</div>

<div id="caracterOne">
<p class="caract"><span class="intit">Prénom:</span>Atuagaq.</p>
<p class="caract"><span class="intit">Nom:</span>Hiku.</p>
<p class="caract"><span class="intit">Surnom:</span>Aucun.</p>
<p class="caract"><span class="intit">Peuple:</span>Gorgoroth.</p>
<p class="caract"><span class="intit">Caste:</span>inconnu.</p>
<p class="caract"><span class="intit">Métier:</span>Corps diplomatique.</p>
<p class="caract"><span class="intit">Date de naissance:</span>1284.</p>
<p class="caract"><span class="intit">Lieu de résidence:</span>Hespéria.</p>
</div>

</div><!-- bandeau -->

<div id="contenu">

<div id="signes"><p class="titreSec">Tenue vestimentaire habituelle.</p>
<p class="textSec">En cours...</p>
</div>
<div id="signes"><p class="titreSec">Traits de caractère.</p>
<p class="textSec">En cours...</p>
</div>

</div><!-- contenu -->

</div><!-- global -->

J'ai définie une première balise 'DIV' qui va contenir tout mon code, elle a pour class:"global". C'est la balise parente du plus haut niveau. Ensuite, deux autres balises enfants juste en dessous du niveau hiérarchique, div id="bandeau" et div id="contenu". Ces deux dernières balises vont contenir leurs propres enfants qui seront les blocs de contenus (Une petite remarque, dans le nommage de vos 'id' et 'class', attention certains noms sont conflictuels comme 'top' par exemple). Donc 'bandeau' correspond en quelque sorte à 'top' et 'contenu' à 'main'. Dans le DIV 'bandeau', j'ai deux définis deux blocs, l'un pour y mettre une image div id="avatar" et l'autre une colonne de texte div id="caracterOne" (toutes les class définie sur 'P' et 'SPAN' ne sont que le formatage du texte). Ensuite dans le div id="contenu", viennent des blocs de texte, soit div id="signes" soit div id="description". Donc comme vous pouvez le voir, le code HTML ne défini pas l'apprence de ma page. Tout étant dans ma CSS. Et c'est là que Flex devient intéressant, vous pouvez rajouter des blocs d'informations ou en enlever sans avoir à vous soucier du rendu par HTML vu qu'il ne contient plus aucune information de formatage.

Détail du code CSS.

Code:

div.global {
display: flex;
justify-content: center;
flex-direction: column;
width: 580px;
max-width: 580px;
background-color: #3F3D36; /* terre foncée */
border: 1px solid black;
}

div#bandeau {
display: flex;
flex-direction: row;
align-items: flex-start;
flex-wrap: wrap;
width: 580px;
max-width: 580px;
}

div#avatar {
display: flex;
flex-direction: column;
flex-grow: 0;
align-items: center;
justify-content: center;
width: 190px;
height: 340px;
/*
border:1px solid #381302;  
   background-image: radial-gradient(
   circle at top right, #f06d06 , #5F391B );
*/
}

img#vava {
width: 170px;
height: 320px;
border:1px solid #381302;
}

div#caracterOne{
display: flex;
flex-direction: column;
flex-grow: 0;
width: 225px;
background-color: #3F3D36; /* terre foncée */
}

div#caracterTwo{
display: flex;
flex-direction: column;
flex-grow: 0;
width: 225px;
background-color: #3F3D36; /* terre foncée */
}

div#contenu {
display: flex;
flex-direction: column;
/* justify-content: space-between; */
flex-wrap: wrap;
width: 580px;
max-width: 580px;
}

div#signes{
display: flex;
flex-direction: column;
width: 100%;
background-color: #3F3D36; /* terre foncée */
}

div#description{
display: flex;
flex-direction: column;
width: 100%;
background-color: #3F3D36; /* terre foncée */
}

span.intit {
font-family: 'Roboto', sans-serif;
font-size: 12px;
text-align: left;
text-decoration: underline;
font-weight: bold;
color: #F9C89B; /* rgba(180, 149, 131, 1); */
padding-left: 20px;
padding-right: 5px;
}

p.caract {
font-family: 'Roboto', sans-serif;
font-size: 13px;
text-align: left;
line-height : 0.5em;
color: #F9C89B; /* rgba(180, 149, 131, 1); */
}


p.titreSec {
font-family: 'Roboto', sans-serif;
font-size: 14px;
text-align: left;
text-decoration: underline;
font-weight: bold;
color: #F9C89B; /* rgba(180, 149, 131, 1); */
padding-left: 20px;
}

p.textSec {
font-family: 'Roboto', sans-serif;
font-size: 14px;
text-align: left;
color: #AD8F7E; /* rgba(180, 149, 131, 1); */
padding-left: 20px;
padding-right: 20px;
}

Les déclarations dans le détail.

Je ne vais pas forcement suivre l'ordre des balises dans le code affiché (encore une question de flemme...), mais par ordre d'importance. Dans notre "div.global" (balise parente du plus haut niveau), je déclare que ce bloc réagira avec les attributs du module Flex de CSS de cette manière, "display: flex;" (donc déclaration à mettre pour tout les blocs que l'on voudra Flex). Ensuite vient "flex-direction", c'est à dire définit si les balises enfants seront mises sur l'axe horizontal ou bien l'axe vertical. Dans l’exemple, j'ai choisie que les enfants seront sur un axe vertical, c'est à dire les unes en dessous des autres. Mais rien ne n'empêche par la suite de changer ce comportement dans les balises enfants suivantes. Si nous regardons bien, l'image se trouve d'être sur la même ligne qu'un bloc de texte (sens horizontal et non vertical), car le "div#bandeau" à pour valeur "flex-direction: row". Dans chacun des enfants l'on peut définir le sens de l'axe. Revenons à notre "div.global" qui possède la déclaration "justify-content".

"justify-content" définit l'alignement dans l'axe principal. Il peut prendre plusieurs valeurs: "flex-start", "flex-end", "center", "space-between" et "space-around". Dans l'exemple, mon "div.global" a pour axe principal le sens vertical, donc avec "center", tous les blocs enfants seront centrés les un sous les autres. Mais sur un axe principal ayant pour valeur "row", ce sera plus parlant. Imaginons donc un bloc parent avec pour axe principal le sens horizontal ayant plusieurs enfants dont la taille totale soit inférieur au parent. "flex-start" positionnera tout les blocs collés les uns aux autres à gauche dans le parent. Avec "flex-end", même chose mais calés à droite. Avec "center" tous collés au centre et l'espace restant réparti également de chaque cotés. Avec "space-between", le premier et le dernier enfant seront collés à droite et à gauche, l'espace restant étant réparti entre les autres enfants. Et avec "space-around", l'espace restant est réparti entre tous les enfants.

Mais ça c'est l'axe principal ! Vous pouvez jouer aussi sur l'alignement secondaire avec la propriété "align-item" dont voici les valeurs: "stretch", "flex-start", "flex-end", "center" et "baseline". Bon, je vais pas aller plus loin, y pleins d’exemple démonstratifs sur le web. Sans oublier "align-self"... Bref, le positionnement des blocs est relativement aisé !

Maintenant, revenons sur le coté pratique de Flex. Dans mon exemple, j'ai donc deux colonnes de contenu et je me rends compte qu'il m'en faudrait une troisième. Ben, dans le HTML, je rajoute mon troisième bloc de contenu et ensuite je le déclare dans ma CSS comme suit:

Code:

<div id="caracterTwo"> <-- ICI MON TROISIEME BLOC HTML -->
<p class="caract"><span class="intit">Couleur des yeux:</span>Vert foncé.</p>
<p class="caract"><span class="intit">Couleur des cheveux:</span>Roux.</p>
<p class="caract"><span class="intit">Couleur de la peau:</span>Blanche pâle.</p>
<p class="caract"><span class="intit">Taille:</span>1.69m.</p>
<p class="caract"><span class="intit">Poids:</span>65kg.</p>
<p class="caract"><span class="intit">Age:</span>22 - 26 ans</p>
<p class="caract"><span class="intit">Age apparent:</span>Jeune femme.</p>
<p class="caract"><span class="intit">Religion:</span>Kesha.</p>
</div>


/* DECLARATION DU BLOC DANS LA CSS*/

div#caracterTwo{
display: flex; /* déclaration obligatoire */
flex-direction: column; /* definition de l'axe principal du contenu */
flex-grow: 0;
width: 180px; /* valeurs fixes, question de contexte */
}

Hormis le bloc HTML qu'est lourd à lire, une petite déclaration dans ma CSS et j'ai une troisième colonne. Pratique non ?

Le résultat:

Prénom:Atuagaq.

Nom:Hiku.

Surnom:Aucun.

Peuple:Gorgoroth.

Caste:inconnu.

Métier:inconnu.

Date de naissance:1284.

Lieu de résidence:Hespéria.

Couleur des yeux:Vert.

Couleur des cheveux:Roux.

Couleur de la peau:Blanche.

Taille:1.69m.

Poids:65kg.

Age:22 - 26 ans

Age :Jeune.

Religion:Kesha.

Mais je vois venir les p'tits vicieux xd! me dire, mais les blocs s'affichent dans l'ordre du code HTML ! Et puis si je veux mettre l'image à droite au lieu qu'elle soit à gauche, il va bien falloir retoucher le HTML. Et bien non ! Suffit de rajouter au bloc concerné, "order: 1"

Prénom:Atuagaq.

Nom:Hiku.

Surnom:Aucun.

Peuple:Gorgoroth.

Caste:inconnu.

Métier:inconnu.

Date de naissance:1284.

Lieu de résidence:Hespéria.

Couleur des yeux:Vert.

Couleur des cheveux:Roux.

Couleur de la peau:Blanche.

Taille:1.69m.

Poids:65kg.

Age:22 - 26 ans

Age :Jeune.

Religion:Kesha.

Code:

div#avatar2 {
display: flex;
flex-direction: column;
flex-grow: 0;
align-items: center;
justify-content: center;
order: 1;

Trop facile !

En conclusion.

Bon, je voulais juste vous montrer (un survol rapide) sur un cas concret et sans rentrer dans les détails, la simplicité de Flex. Exit les "TABLE", les "FLOAT" et autres "Z-INDEX" qui sont contraignants et au final peu pratique. Avec FLex, d'un coté votre contenu et seulement du contenu et la mise en page uniquement via votre CSS. Au début, ça peut parraitre déroutant (comme tout...) mais au final, on y gagne en temps de codage et aussi en cas de refonte (si si, c'est du vécu)... Sans parler de la facilité de positionnement des éléments qui n'existait pas en CSS3 et HTML4. Finies les prises de tête pour centrer les blocs XD! Dernière chose, pourquoi Flex plus que Grid ? Question de portage. Mais c'est une autre histoire...