POSITIONNEMENT EN CSS

III. POSITIONNEMENT AVEC FLEXBOX

III.1 Généralités

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 :

Formation.html


<!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 :

Forme.css


.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.

Forme.css


.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 :

positionnment en CSS

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 :

Forme.css


.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.

III.2 Propriétés liées à display : flex

Dans cette partie, nous allons voir quelques propriétés liées à display :flex. Nous allons utiliser l’exemple suivant :

Formation.html


<!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>

III.2.1 La propriété flex-direction

Elle permet de gérer l’alignement des sous-blocs, les valeurs possibles sont :

row (valeur par défaut) :aligne les sous blocs verticalement de la gauche vers la droite.

Forme.css
J’ai ajouté une bordure différente à chaque sous bloc afin de bien l’identifier.


.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…

row-reverse : alignement les sous blocs verticalement (sur une ligne) en commençant de la droite vers la gauche.

Forme.css
J’ai mis seulement le code relatif au bloc principal, le reste ne change pas


.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.

Column : aligne les sous blocs horizontalement (sur une colonne) en commençant du haut vers le bas.

Forme.css


.bloc
{
display: flex;
flex-direction: column;
border: 2px red solid;

}

Résultat:

column-reverse : positionne les sous blocs sur une colonne en partant du bas vers le haut.

Forme.css


.bloc
{
display: flex;
flex-direction: column-reverse;
border: 2px red solid;

}

Résultat:

III.2.2 La propriété flex-wrap

Elle permet de gérer le passage des sous blocs à la ligne, elle peut prendre l’une de deux valeurs suivantes :

nowrap: les sous blocs se placent sur une même ligne, il n’ y a pas de passage à la ligne. La largeur de chaque sous bloc s’adapte automatiquement pour que tous les sous blocs soient sur la même ligne. C’est le comportement par défaut.
wrap : certains sous blocs vont à la ligne suivante s’il n’ y a plus de place.

Comme exemple, utilisons le même fichier html, ajoutons à chaque sous bloc une largeur.

Avec nowrap :
Forme.css


.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.

Avec wrap :
Forme.css
J’ai mis seulement le code relatif au bloc principal, le reste de code ne change pas


.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.

III.2.3 La propriété align-items

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

Exemple 1

Forme.css


.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:

Exemple 2

J’ai modifié seulement le code du bloc principal, le reste ne change pas

Forme.css


.bloc
{
display: flex;
align-items: flex-end;
border: 2px red solid;
}

Résultat:

Exemple 3

Forme.css


.bloc
{
display: flex;
align-items: flex-start;
border: 2px red solid;
}

Résultat:

III.2.4 La propriété order

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 :

Forme.css


.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;
    
}