Flexbox

Flexbox, utilisée sur cette version 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 également simplement de 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.

style :
body {

}

​

style :
body {
       display: flex;
}

​

la tête en bas

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

​

de droite à gauche :

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

​

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

  • Les fils 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) ;