Flexbox

La technologie "Flexbox", utilisée pour réaliser la "mise en page" du site, est un ensemble de propriétés nouvelles (donc comprises uniquement par les navigateurs récents) qui simplifie énormément la mise en page d'un site web.  Elles permettent, de manière simple, d'organiser (ou ré-organiser) totalement une mise en page, et ce sans manipuler une seule ligne du code HTML.

Billet créé le :
18 nov 2020

Les 4 images ci-dessous devrait suffire à vous convaincre.

Le code HTML utilisé est le même pour chacune des pages illustrées par ces images. Il est fournit dans l'onglet en bas de page. Ce sont les modifications apportées au code du fichier CSS lié à cette page, qui sont les seules responsables des différences de mise en page. Ce fichier est présenté en haut de chaque image à la suite de " le fichier style.css :".

Image 1

le fichier style CSS associé à cette page : 

body {

}

Aucune propriété ne caractérise la balise "body". Le style par défaut est donc affiché. Ce style correspond aux propriétés :

  • display : flex ;

  • flex-direction : column ;

Cliquer pour agrandir l'image

Les balises HTML sont affichées suivant le flux standard : les balises de type "bloc" ("div", "p") sont affichées les unes sous les autres (ie : dans une même colonne) dans leur ordre d'écriture dans le fichier HTML.

Image 2

Le fichier style CSS associé :

body {
       display: flex;
}

La propriété "flex-direction : row" ne figure pas de le code mais est sous-entendue.

Cliquer pour agrandir l'image

Les balises HTML ne sont plus affichées suivant le flux standard : les balises de type "bloc" ("div", "p") sont affichées les unes à côté des autres (ie : dans une même rangée) dans leur ordre d'écriture dans le fichier HTML.

Image 3

Le fichier de style CSS associé :

body {
       display: flex;
       flex-direction: reverse-column
}

​

Les balises HTML ne sont pas affichées suivant le flux standard : les balises de type "bloc" ("div", "p") sont affichées les unes sous les autres (ie : dans une même colonne) dans l'ordre inverse de leur écriture dans le fichier HTML.

Image 4

Le fichier de style associé :

body {
       display: flex;
       flex-direction: reverse-row
}

​

Les balises HTML ne sont plus affichées suivant le flux standard : les balises de type "bloc" ("div", "p") sont affichées les unes à côté des autres (ie : dans une même rangée) dans l'ordre inverse de leur écriture dans le fichier HTML.

Une mise en page facilitée pour les navigateurs récents avec le modèle FlexBox :

Les éléments enfants sont distribués horizontalement (display:flex) ou verticalement (display:flex; flex-direction: column;) avec passage à la ligne autorisé ou non (flex-wrap) ;

 Alignements et centrages horizontaux et verticaux, justifiés, répartis (justify-content et align-items) ;

Cliquez sur le bouton pour copier le code
dans le presse papier  
    
  <html>
   <head>
       <link href="style.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
       <div style="background-color:red">je suis un bloc rouge</div>
       <div  style="background-color:beige ; width:80%">je suis un bloc beige de largeur 80% contenant des -bloc -
           <p  style="background-color:aqua; width:40%">je suis un bloc bleu de largeur 40% de mon conteneur</p>
           <p style="background-color:aqua; width:40%">je suis un  autre bloc bleu bloc de largeur 40% de mon conteneur</p>
       </div>
       <div style="background-color:green;">je suis un bloc vert</div>
           <span style="background-color:aqua;"> je suis inline bleu <span>
           <span style="background-color:aquamarine;"> je suis inline bleu marine plus large <span>
           <span style="background-color:aqua;"> je suis inline bleue encore un peu  plus large<span>
           <span style="background-color:aquamarine;"> je suis inline mais je suis très très très très très très très trèstrès très très trèstrès très très trèstrès très très trèstrès très très trèstrès très très très long<span>
       <div style="background-color:yellow; width:60%">je suis un bloc jaune  de largeur 60% contenant des -inline-
           <span style="background-color:aqua;"> je suis inline bleu <span>
           <span style="background-color:aquamarine;"> je suis inline bleu marine plus large <span>
           <span style="background-color:aqua;"> je suis inline bleue encore un peu  plus large<span>
           <span style="background-color:aquamarine;"> je suis inline mais je suis très très très très très très très trèstrès très très trèstrès très très trèstrès très très trèstrès très très trèstrès très très très long<span>
       </div>
   </body>
</html>