Modèle de page tous écrans basé sur flex

Flex est une propriété CSS ajoutée pour obtenir des pages qui s'adaptent automatiquement aux différents écrans.

C'est une valeur de l'attribut display (affichage). CSS a donc simplement ajouté une valeur supplémentaire à une propriété existante:

Quand on a opté pour la valeur flex, d'autres propriétés peuvent alors être ajoutées au conteneur.

Pour les éléments contenus, diverses propriétés sont aussi ajoutée. Notamment flex-shrink qui indique si l'élément peut être réduit ou pas pour libérer de l'espace. flex-shrink:0 indique qu'il ne doit pas être réduit.

Nous voulons donc à l'aide de ces nouvelles propriétés, réaliser le modèle d'une page web qui soit adaptable et en utilisant un minimum de code CSS.

Pour ce faire, nous devons subdiviser la page en plusieurs sections:

  1. Fullpage est le conteneur principal, ses deux éléments sont alignés en colonne.
  2. Le premier élément, main, et le second, footer sont séparés par un espace variable, selon le contenu de la page. Footer, le pied de page est toujours en bas de la fenêtre, même si la page est presque vide.
  3. Main contient deux éléments disposés en colonne, header (en-tête) et middle.
  4. Header à une hauteur fixée, middle une hauteur variable.
  5. Middle contient deux éléments disposés en ligne (valeur par défaut, donc non précisée). Ils sont séparés par un espace variable selon le contenu.
  6. Le premier élément, content, a une largeur variable et est placé sur la gauche. Le second, sidebar, sur la droite, a une largeur fixe.

Cela donne la disposition correspondant au schéma suivant:

Modèle de page flex

Le code CSS est très simplifié:

<style>
html, body: {
  margin:0;
  padding:0;
}

#fullpage {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  margin:0;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

#middle {
  display:flex;
  justify-content:space-between;
}

#header {
  height:100px;
}

#content {
  padding:32px;
}

#sidebar {
  width:200px;
}

#footer {
  min-height:64px;	
  display:flex;
  flex-direction:column;
  justify-content:center;
}
</style>

On a supprimé du code de la démonstration ce qui ne sert pas à la disposition des éléments. Le code complet est dans la page de démonstration.

Si on veut limiter la largeur maximale de la page, on peut ajouter ces deux lignes dans la propriété #fullpage:

max-width:1280px;
margin:auto;

Essayez la démonstration

Vous pouvez la télécharger et l'utiliser comme point de départ pour un site ou une application.

La valeur flex de display est supportée par tous les navigateurs récents. Elle ne l'est pas par Internet Explorer cependant. Si vous voulez maximisez l'audience, il vous faut en rester au CSS classique, voici un modèle de page pour tous les anciens navigateurs.