Découverte ou redécouverte du flex power avec le CSS

Lorsque l’on construit l’architecture d’un site web, on arrive souvent à trois ou 4 parties … sur un écran de PC. Qu’en est-il pour un téléphone ? Vous connaissez sans doute le pattern Hamburger, saviez-vous qu’il existe aussi une habitude sur petit écran ?
Découvrons ensemble la puissance du flex, adhérons dès à présent au flex power avec le CSS !

Mise en situation

Imaginons que nous souhaitons créer l’application : Selfie à Wookies. (nous reparlerons de cette application, elle nous servira pour apprendre Angular en niveau 1 et 2).

Notre but est d’obtenir cette maquette :

Un container flex et c’est parti !

Si l’on prend le footer, que voit-on ?

Nous avons trois zones qui s’affichent l’une après l’autre, donc sur la même ligne.

Ici, c’est l’utilisation typique d’un div avec flex, qui contiendra trois “colonnes”.

Commençons donc par créer un div, avec une classe container.

Puis ajoutons-lui trois “colonnes”. En fait, ce seront des div avec la class .col.

Et voilà, nous avons nos trois colonnes, ajustées.

Il nous reste plus qu’à ajouter nos icônes pour chaque colonne.

Plusieurs options disponibles

Il existe plusieurs options pour affiner l’utilisation du flex power !

Par exemple, vous pourrez dire de créer une nouvelle ligne si le nombre de colonne dépasse la taille du conteneur, avec le flex-wrap: wrap;

Ou bien, vous pourrez changer la direction : horizontale ou verticale des colonnes de votre conteneur.

Nous vous laissons découvrir les possibilités avec notre exemple sur codepen.io.

Un exemple en live

Pour voir le comportement en live (pas la maquette, hein, juste le fonctionnement du flex), et récupérer le code, allez sur le codepen.io d’Evan BOISSONNOT.