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

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

style :
body {

}

style  équivalent :
body {
       display: flex;
       flex-direction: column
}

style :
body {
       display: flex;
}

style  équivalent :
body {
       display: flex;
       flex-direction: row
}

Et maintenant renversons tout pas une infime variante du style.

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) ;