Création d'une structure d'application avec flexbox

Publié le 23 juin 2016 par Victor Darras | intégration

Cet article est publié sous licence CC BY-NC-SA

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.

Pourquoi utiliser 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 :

Aperçu de l'exercice

  • Un header fixe.
  • Une sidebar responsive.
  • Une navigation souple et responsive elle aussi.
  • Un sticky footer.

Mise en place du markup

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 :

Apercu de la page

Définition des conteneurs et des contenus

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

Structure globale de l’application

Header fixe

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

Apercu de la page

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

Apercu de la page

Séparation du contenu et de la sidebar

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

Apercu de la page

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

Apercu de la page

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 :

Apercu de la page

Pour conclure

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.


Liens