J’ai préféré vous parler de cette valeur possible de la puissante propriété display à part car elle est un peu particulière selon moi. Par défaut, quand un bloc contient de sous blocs (une section qui contient de sous sections, ul qui contient de li), les sous-blocs se positionnement les uns en dessous des autres comme le montre l’exemple suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Formation en HTML et CSS</title>
</head>
<body>
<section class="bloc">
<section class="sousBloc1">
<h1> VISUAL BASIC </h1>
<h3> LES BASES DU LANGAGE ET MODE CONSOLE </h3>
<p>Wikipédia présente Visual basic comme un langage de
programmation événementielle de troisième génération ainsi qu’un
environnement de développement intégré, créé par Microsoft pour son
modèle COM. <br/>Visual basic est directement dérivé du BASIC (acronyme
pour Beginner’s All purpose Symbolic Instruction Code ) et permet le
développement rapide d’applications, la création d’interfaces utilisateur
graphiques, l’accès aux bases de données en utilisant les technologies DAO,
ADO et RDO, ainsi que la création de contrôle ou objets Active X. </p>
<p>Pour coder dans un langage de programmation, il faut des outils
adaptés : un éditeur de texte, un compilateur ainsi qu’un débogueur.<br/> Il y a
des programmes qui combinent les trois outils et ces programmes sont
appelés Environnement de développement intégré (EDI) ou IDE en anglais,
pour Integrated development Environment. </p>
<p>L’éditeur de texte nous permet d’écrire le code source du programme.
Le compilateur (Interpréteur) pour transformer le code source en binaire qui
est le seul langage compréhensible par la machine.<br/>
Le débogueur permet de traquer les erreurs dans le programme.
Pour Visual basic, nous pouvons utiliser : Visual studio, Visual studio
Express, SharpDevelop, MonoDevelop etc. </p>
</section>
<section class="sousBloc2">
<h2>WISSEN CORPORATION </h2>
<p>C’est un groupe formé essentiellement de meilleurs étudiants de nos
groupes d’étude et d’encadrement qui se sont fixés plusieurs objectifs dont
le premier est celui du partage de la connaissance en Informatique et en
mathématique. </p>
<p>
Albert Einstein a dit : « Il ne faut pas faire de l’intelligence un dieu,
car si celle-ci est douée de muscles puissants, elle n’a pas de personnalité » …<br/>
Parfois, il n’existe pas de gens plus intelligents que les autres, mais c’est
le travail qui nous différencie.<br/>
Pour bâtir haut, il faut creuser profond et tu seras fort dans ce que tu te donnes. </p>
<p>Il y a une naissance en toute connaissance, Thucydide a dit : « Avoir
des connaissances sans les partager, c’est se mettre au niveau de celui qui
n’a pas d’idées ». Wissen Corporation est là pour assurer votre formation,
votre encadrement suivant vos désirs. </p>
</section>
</section>
</body>
</html>
Ajoutons une bordure à chaque sous-section et à la section principale :
.bloc
{
border: 2px red solid;
}
.sousBloc1, .sousBloc2
{
border: 2px blue solid;
margin: 20px;
}
Résultat:
Si nous appliquons display : flex au bloc parent, les sous-bloc (les enfants) seront repartis en colonnes. Comme dans notre exemple, les deux sous-blocs seront repartis en colonne, c’est-à-dire seront positionnés l’un à côté de l’autre.
.bloc
{
display: flex;
border: 2px red solid;
}
.sousBloc1, .sousBloc2
{
border: 2px blue solid;
margin: 20px;
}
Résultat:
Notez que les blocs enfants n’occupent que la hauteur et la largeur nécessaire au remplissage : les colonnes ne remplissent pas forcement toute la largeur.
Pour chaque sous-bloc, la largeur peut être gérée par la propriété flex :
Le nombre donne le rapport de largeur (ou de hauteur) entre les sous-blocs. En mettant 1 à tous les sous-blocs, ils seront tous de la même taille.
Par exemple, si je mets flex : 4 pour le premier sous-bloc et flex : 1 pour second :
.bloc
{
display: flex;
border: 2px red solid;
}
.sousBloc1, .sousBloc2
{
border: 2px blue solid;
margin: 20px;
}
.sousBloc1
{
flex: 4;
}
.sousBloc2
{
flex: 1;
}
Résultat:
En appliquant flex :4 et flex :1 respectivement au premier et deuxième sous-bloc, c’est comme si nous avons divisé la largeur disponible en 5 parties (4+1) et avons attribué le 4/5 au premier sous-bloc et le reste (1/5) au deuxième sous-bloc.
Sachez qu’il est également possible de contrôler la largeur et la hauteur de chaque sous-bloc avec les propriétés width et height.
Dans cette partie, nous allons voir quelques propriétés liées à display :flex. Nous allons utiliser l’exemple suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Formation en HTML et CSS</title>
</head>
<body>
<section class="bloc">
<div class="titre">
<h1> VISUAL BASIC </h1>
<h3> LES BASES DU LANGAGE ET MODE CONSOLE </h3>
</div>
<p class="para1">Wikipédia présente Visual basic comme un langage de
programmation événementielle de troisième génération ainsi qu’un
environnement de développement intégré, créé par Microsoft pour son
modèle COM. <br/>Visual basic est directement dérivé du BASIC (acronyme
pour Beginner’s All purpose Symbolic Instruction Code ) et permet le
développement rapide d’applications, la création d’interfaces utilisateur
graphiques, l’accès aux bases de données en utilisant les technologies DAO,
ADO et RDO, ainsi que la création de contrôle ou objets Active X. </p>
<p class="para2">Pour coder dans un langage de programmation, il faut des outils
adaptés : un éditeur de texte, un compilateur ainsi qu’un débogueur.<br/> Il y a
des programmes qui combinent les trois outils et ces programmes sont
appelés Environnement de développement intégré (EDI) ou IDE en anglais,
pour Integrated development Environment. </p>
<p class="para3">L’éditeur de texte nous permet d’écrire le code source du programme.
Le compilateur (Interpréteur) pour transformer le code source en binaire qui
est le seul langage compréhensible par la machine.<br/>
Le débogueur permet de traquer les erreurs dans le programme.
Pour Visual basic, nous pouvons utiliser : Visual studio, Visual studio
Express, SharpDevelop, MonoDevelop etc. </p>
</section>
</body>
</html>
Elle permet de gérer l’alignement des sous-blocs, les valeurs possibles sont :
.bloc
{
display: flex;
flex-direction: row;
border: 2px red solid;
}
.para1
{
border: 2px blue solid;
margin: 5px;
}
.para2
{
border: 2px green solid;
margin: 5px;
}
.para3
{
border: 2px yellow solid;
margin: 5px;
}
.titre
{
border: 2px maroon solid;
margin: 5px;
size: 1.5em;
}
Résultat:
Le premier sous bloc est placé à gauche ainsi de suite…
.bloc
{
display: flex;
flex-direction: row-reverse;
border: 2px red solid;
}
Résultat:
Vous l’avez sans doute remarqué : le premier sous-bloc est placé à droite.
.bloc
{
display: flex;
flex-direction: column;
border: 2px red solid;
}
Résultat:
.bloc
{
display: flex;
flex-direction: column-reverse;
border: 2px red solid;
}
Résultat:
Elle permet de gérer le passage des sous blocs à la ligne, elle peut prendre l’une de deux valeurs suivantes :
Comme exemple, utilisons le même fichier html, ajoutons à chaque sous bloc une largeur.
.bloc
{
display: flex;
flex-wrap: nowrap;
border: 2px red solid;
}
.para1
{
border: 2px blue solid;
margin: 5px;
width: 20%;
}
.para2
{
border: 2px green solid;
margin: 5px;
width: 50%;
}
.para3
{
border: 2px yellow solid;
margin: 5px;
width: 20%;
}
.titre
{
border: 2px maroon solid;
margin: 5px;
size: 1.5em;
width: 20%;
}
Résultat:
Le navigateur a ajusté la largeur de chaque sous-bloc pour qu’il se positionnent sur la même ligne.
.bloc
{
display: flex;
flex-wrap: wrap;
border: 2px red solid;
}
Résultat:
Le dernier sous-bloc passe à la ligne suivante car il n’a plus d’espace sur la première ligne.
Permet de gérer l’alignement vertical des sous blocs, elle permet de déplacer l’axe des sous blocs. Les valeurs possibles sont : flex-endmark> en bas (ou à droite) ; flex-start : en haut (ou à gauche, par défaut) ; center : centré ; baseline : ligne de base. Pour les exemples suivants, ajoutons une hauteur pour chaque sous-bloc
.bloc
{
display: flex;
align-items: center;
border: 2px red solid;
}
.para1
{
border: 2px blue solid;
margin: 5px;
height : 300px;
}
.para2
{
border: 2px green solid;
margin: 5px;
height : 200px;
}
.para3
{
border: 2px yellow solid;
margin: 5px;
height : 250px;
}
.titre
{
border: 2px maroon solid;
margin: 5px;
size: 1.5em;
height :200px;
}
Résultat:
J’ai modifié seulement le code du bloc principal, le reste ne change pas
.bloc
{
display: flex;
align-items: flex-end;
border: 2px red solid;
}
Résultat:
.bloc
{
display: flex;
align-items: flex-start;
border: 2px red solid;
}
Résultat:
Cette propriété permet de choisir l’ordre d’affichage de sous blocs quel que soit l’ordre dans html. Dans notre exemple, le premier sous bloc est le titre, donc c’est lui qui s’affiche le premier par défaut, changeons l’ordre d’affichage :
.bloc
{
display: flex;
border: 2px red solid;
}
.para1
{
border: 2px blue solid;
margin: 5px;
height : 300px;
order: 2;
}
.para2
{
border: 2px green solid;
margin: 5px;
height : 200px;
order: 3;
}
.para3
{
border: 2px yellow solid;
margin: 5px;
height : 250px;
order: 1;
}
.titre
{
border: 2px maroon solid;
margin: 5px;
size: 1.5em;
height :200px;
order: 4;
}