Fork me on GitHub

Mise en page avec CSS

Mise en page

Problématique

  • Distribuer le contenu dans la page.
  • S’adapter à des modes d’affichage différents (écran, mobile, impression, …).
  • Permettre un certain degré de non-linéarité.

Modes de mise en page en CSS

  • Box model (le plus ancien),

  • Positionnement absolu (aussi ancien),

  • Flexbox (le nouvel arrivant),

  • Grille (encore dans les cartons…)

Le box model

Le box model

Il y a trois types de boîtes en CSS :

Bloc: Un bloc est un rectangle. Il prend toute la largeur et autant de hauteur que nécessaire.

Inline: Les inlines se comportent comme des lignes de texte, qui reviennent à la ligne lorsqu’elles atteignent la marge. Elles prennent seulement l’espace qu’elles occupent.

Inline-block: Les inline blocks, comme les blocs, ne reviennent pas à la ligne. Mais, comme les inline il peut y en avoir plusieurs sur une même ligne, et ils ne prennent que l’espace qu’ils occupent.

Je prends peu de place

Le inline, le block et le truand

Il y a des règles sur quelles boîtes peuvent aller dans quelles autres. Au vieux temps, il y avait deux catégories :

  • Les blocs peuvent aller dans les blocs,
  • Les inlines peuvent aller dans les inlines ou les blocs,
  • Les blocs ne peuvent pas aller dans les inlines.

Depuis l’introduction de la propriété display en CSS, on peut changer le type de boîte d’une balise ; et avec HTML5 les règles se sont encore complexifiées.

  • Blocs par défaut: <div>, <hX>, <p>, …
  • Inlines par défaut: <span>, <a>, <em>, <img>, texte simple, …

Démonstration de inline-block

Le flux

Flux normal

Dans le flux normal, les boîtes sont disposées du haut vers le bas et de gauche à droite (mais le dernier peut être changé).

Floats

Les boîtes peuvent sortir du flux en flottant :

  • float: left
  • float: right

Uniquement utile pour insérer des figures dans un texte.

Démonstration de float

Positionnement absolu

Les types de positionnement

En plus de la propriété float, les boîtes peuvent sortir du flux en étant positionnées explicitement, grâce à la propriété CSS position:

  • static : Le flux par défaut.

  • absolute : Positionnement en coordonnées X-Y par rapport au bloc conteneur.

  • fixed : Positionnement en coordonnées X-Y par rapport à l’écran.

  • relative : Positionnement en coordonnées X-Y par rapport au point où l’élément se serait positionné normalement.

Les coordonnées de positionnement sont spécifiées par les propriétés left, right, top et bottom.

Démonstration de position

Flexbox

Flexbox

Limitations du box model

  • Centrer verticalement.
  • Layout en colonnes (traditionnellement simulé avec float, display, position, dimensions fixes, etc., voire même avec <table>).
  • Adaptation à la taille de l’écran.
  • Non-linéarité.

Flexbox

  • Un modèle de boîtes agnostique par rapport à la direction.
  • Basé sur un conteneur et ses éléments.
  • Algorithmes de calcul de taille et espacement.
  • Non-linéaire

Les propriétés CSS de flexbox

Propriétés principales du conteneur

  • display: flex déclare un conteneur flexible.
  • flex-flow: row nowrap déclare la direction et le mode de retour à la ligne.

Propriétés principales des éléments

  • flex: 0 1 auto déclare l’élasticité d’un élément.
  • order: 1 permet de réaliser un affichage non-linéaire.

Autres propriétés

  • Conteneur : flex-direction, flex-wrap, justify-content, align-items, align-content.

  • Éléments : flex-grow, flex-shrink, flex-basis, align-self.

Démonstration de Flexbox

Pour conclure

Utiliser des frameworks

  • CSS est un standard géant.
  • Les parties expérimentales sont en constante évolution.
  • Assurer la compatibilité avec les vieux navigateurs est un cauchemar.
  • Les problématiques de mise en page peuvent procurer des maux de tête.

Laissez faire cela aux experts : utilisez un frontend framework.

Exemples

Autres usages avancés de CSS

  • Transformations 2D et 3D.
  • Animations, transitions.
  • Adaptation à la taille d’écran (responsive layout).
  • Pagination.
  • …