Apprendre et maîtriser le module CSS
Flexbox

C'est quoi Flexbox ?

Module CSS 3 : Modèle de boîte flexible (Flexbox 😄)

Ensemble de règles CSS qui sert à disposer des éléments de manière flexible

Permet de :

  • Disposer, aligner et distribuer l'espace entre les éléments d'un conteneur en css
  • Créer des layouts de composants complexes et avancés avec un minimum d'effort
  • Ne plus s'embêter avec des techniques inadaptées, (float 😢, table, display inline-block, etc...)
Broken CSS
Un développeur qui se débat avec CSS...

Contexte

un peu d'histoire

  • Première réflexion en 2008
  • Premier brouillon publié en 2009 ( 
    display: box;
    , 
    box-*: ...;
    )
  • Second brouillon en 2011 ( 
    display: flexbox;
    , 
    flex();
    )
  • Première version quasi finale en 2012 (statut “W3C Candidate Recommandation”)
  • Version actuelle qui date de 2017 ( 
    display: flex;
    )

Support navigateurs

Très bon support des navigateurs web ⬇️

caniuse Flexbox support
source caniuse.com/?search=flexbox

Les bases

1. La terminologie

2 éléments centraux :

un conteneur (Flex-Container)

des descendants flexibles (Flex Items)

2. La répartition des éléments

Elle se fait sur deux axes

Axe principal (Main-Axis)

Axe de distribution principale des Flex-Items au sein du conteneur (horizontal ou vertical)

Axe secondaire (Cross-Axis)

Perpendiculaire à l'axe principal (horizontal ou vertical là aussi)

2. La répartition des éléments - schémas

Main-Axis
Cross-Axis
  • 1
  • 2
  • 3
Main-Axis
Cross-Axis
  • 1
  • 2
  • 3

2. La répartition des éléments - schémas bis

Main-Axis horizontal (par défaut)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

Main-Axis vertical

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

Démo

Répartition de l'espace entre les éléments au sein d'un Flex-Container 

justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
flex-direction: row-reverse;
align-self: ;
align-items: center;
margin-left: auto;

  • Sangoku picture
  • Piccolo picture
  • Krilin picture
  • Sangohan picture
  • Vegeta picture

Ça a l'air vraiment cool 😃

Les possibilités sont quasi infinies...

To infinity and beyond!
Flexbox, c'est un peu de la triche quand même !...

Mais attention...

Flexbox ne permet pas tout

  • Layout sur une dimension uniquement
  • Pas indiqué pour le Layout de page (pour ça, il y a le Module CSS Grid Layout, mais c'est une autre histoire 🤨)

Des articles utiles

https://apptitude.ch/digital-insights/les-layout-du-web-partie-2-flexbox-et-grid/ https://ishadeed.com/article/grid-layout-flexbox-components/

C'est parti !

Let's go!
Allez, on voit tout ça ensemble ! 😉