Bonjour à tous, suite à un premier article portant sur la théorie de flexbox je me suis dis qu’il était temps de mettre ces connaissances en pratique.
Ainsi à commencé la refonte de notre plateforme Hackademy, où j’ai repris la structure à partir de rien, avec pour objectif d’utiliser au maximum les outils proposés par flexbox.
Après être passé par la douce époque des layouts à base de tableaux HTML, puis du positionnement absolu pour tout et n’importe quoi, nous avons eu le droit à une époque obscure d’utilisation de hack pour définir des grilles responsives (j’exagère, nous y sommes encore, vous savez, le fameux float) jusqu’à l’avènement d’une solution créée tout spécialement pour répondre à notre besoin de positionnement d’éléments : Flexbox.
Certains me répondront que grid-layout est encore mieux adapté à la mise en place de layout d’application. À ceux là je répondrais “oui, mais pas tout de suite”.
Dans cet article nous verrons donc — mises en pratique — les règles de flexbox utiles pour créer :
Avant de commencer, il faut préciser que les propriétés de flexbox sont encore trés dépendantes de la forme de votre DOM. Pour être sûr que nous partions sur une même base voici le HTML (slim) que nous allons utiliser pour définir la structure de l’application :
header.header
.header-logo BRAND
ul.header-navigation
li PRIMARY
li SECONDARY
li TERTIARY
Un header contenant le logo de l’application ainsi que la navigation principale.
.page
.sidebar
ul.sub-navigation
li first link
li second link
li third link
li fourth link
li fifth link
.section
.content
h1 hello world
p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora magnam consectetur sed earum odit quae vitae laudantium voluptatibus ipsa asperiores molestias, iusto autem repellat quibusdam, natus at culpa ipsum, explicabo.
footer.footer
Nous ajoutons un conteneur pour la page, qui contient la .sidebar, sa navigation ainsi qu’un bloc .section dans lequel nous mettrons le contenu (dans .content) et le footer de la page.
Arrivé ici vous devriez avoir une page plutot minimaliste dans ce genre :
Tout d’abord nous allons spécifier quelques règles pour notre conteneur global, body, il fera donc toute la largeur/hauteur de l’écran, et définira son affichage en flexbox avec display:flex. Ensuite nous spécifions le fait que la structure de base sera en collonne afin de placer notre header au dessus du reste de la page.
body
height: 100vh
width: 100vw
display: flex
flex-direction: column
Nous ajoutons maintenant les règles de gestion pour le header de la page. La syntaxe courte de flex nous permet de définir flex-grow, flex-shrink ainsi que flex-basis dans une seule propriété.
Si nous voulons que le header ne soit pas extensible, ni compressible et avec une hauteur fixe de 5em, alors nous utiliserons les valeurs 0, 0 et 5em.
Une fois que nous avons appliqué display:flex à notre header nous pouvons faire en sorte que ses enfants soient centrés verticalement avec align-items: center.
.header
display: flex
justify-content: space-between
align-items: center
padding: 0 0.5em
flex: 0 0 5em
background: $color
On ajoute quelques styles au logo puis on s’occupe de mettre en place la navigation du header.
Comme précédemment, on commence par ajouter un flex: 1 qui indiquera que nous voulons que la navigation prenne un maximum de la largeur du header. On lui ajoute display: flex pour placer les élément de navigation en ligne (valeur par défaut de flex-direction), un justify-content: flex-end pour placer nos liens à la fin de la ligne (et donc à droite du header).
.header-logo
padding: 1em
font-weight: 900
color: #fff
.header-navigation
display: flex
justify-content: flex-end
align-content: center
margin: 0
padding: 0
flex: 1
list-style: none
li
padding: 0.5em 0.75em
margin: 1em 0.5em
font-size: 0.75em
color: #fff
border: 1px solid #fff
Nous ajoutons une règle flex pour rendre le contenu de la page extensible sous le header fixe. Ensuite nous prévoyons de positionner la sidebar à gauche du contenu, nous ajoutons donc flex-direction: row afin de créer une nouvelle ligne.
.page
display: flex
flex-direction: row
flex: 1 1 auto
Toujours avec la règle flex nous fixons la sidebar à 20% de la largeur de notre page, avec un minimum de 10em pour être assuré d’avoir toujours des éléments lisibles.
Ensuite nous définissons une taille extensible pour la .section (qui contient contenu et footer), à laquelle nous ajoutons overflow-y: scroll pour s’assurer que l’utilisateur ne fasse défiler que cette partie de la page.
.aside
min-width: 10em
flex: 0 0 20%
background: darken($color, 30)
.section
display: flex
flex-direction: column
flex: 1 1 auto
overflow-y: scroll
On utilise la même méthode que pour les éléments de navigation du header si ce n’est qu’ici nous affichons les enfants en colonne.
.sub-navigation
display: flex
flex-direction: column
align-content: center
margin: 0
padding: 1em 0
flex: 1
list-style: none
li
padding: 0.75em 1em
color: $color
Pour gérer les footer nous avons longtemps fait appel à Javascript; détecter si la page contient assez de contenu, sinon, déplacer dynamiquement le footer en bas de page et si oui, le laisser à la suite du contenu. Cela demande des compétences supplémentaires, et souvent de maintenir deux fichiers différents (css et js) pour un point pourtant basique…
Avec flexbox, il est possible de gérer ça en quelques lignes. On s’assure que le parent a bien les règles d’affichage flex, en colonne, puis on défini les règles de gestion de nos éléments enfants.
D’abord on définit le .content comme étant extensible (flex-grow à 1), suivi du footer non-extensible auquel on ajoute une taille basique de 4em.
.content
padding: 2em
flex: 1 0 auto
.footer
flex: 0 0 4em
background: $color
Si tout s’est passé comme prévu vous devriez maintenant avoir une page qui ressemble de près à ceci :
Comme vous avez pu le remaquer, il est très rapide de mettre en place une structure de page responsive et relativement complexe avec flexbox. Il sera tout aussi simple d’imbriquer ensuite différents composants de page, puisque les éléments flex sont adaptables par défaut. J’espère vous avoir donné envie d’explorer plus en détails les possibilités de ce nouvel outil et vous incite à rendre vos CSS mieux maintenable en réduisant les règles de gestion de layout. N’hésitez pas à partager cet article autour de vous et à commenter s’il vous vient une question ou une remarque.
L’équipe Synbioz.
Libres d’être ensemble.