Mises en page avancées avec les boîtes flexibles

La caractéristique principale des boîtes flexibles (ou flexbox) est leur capacité à modifier les objets qui la composent, leur hauteur et/ou leur largeur afin d'occuper au mieux l'espace d'affichage disponible, quel que soit l'appareil utilisé. Un conteneur flexible pourra ainsi étendre ses objets pour remplir l'espace disponible ou les réduire afin d'éviter tout dépassement.

Les problèmes de la disposition flottante

• Difficile de compartimenter les éléments : Si le contenu du site est imprévisible, ce sera compliqué que de maintenir une mise en forme correcte avec des éléments flottants.
• Dépendance quant à l'ordre du document source : ce type de disposition dépend de l'organisation du code source du document HTML. Il est donc compliqué de modifier la disposition en fonction de différentes requêtes média pour obtenir des sites responsive.
• Obtenir des colonnes de même taille : si on a 2-3 colonnes avec du contenu différent et qu'on souhaite qu'elles aient la même taille, quel que soit le contenu, cela sera compliqué.
• Centrer le contenu : Il est très fastidieux d'utiliser des élément flottants pour centrer des éléments horizontalement et verticalement.

Les solutions apportées par les boîtes flexibles

• Les objets flexibles s'agrandissent pour remplir l'espace nécessaire ou se réduisent pour éviter le dépassement. Ainsi, le problème de contenu imprévisible est résolu et la disposition reste cohérente.
• Les objets flexibles ont des dimensions proportionnelles.
• Les objets flexibles à l'intérieur des conteneurs flexibles peuvent être disposés dans n'importe quelle direction. Cela résoud le problème lié à l'ordre du contenu dans le document et aux reques média. L'ordre visuel est ainsi indépendant de l'ordre du document, ce qui facilite la création des sites responsive.

Les propriétés des boîtes flexibles

• Axe principal et dimension principale (main axis, main dimension) : l'axe principal d'un conteneur flexible est l'axe selon lequel les objets flexibles sont disposés.
• Début et fin de l'axe principal (main start, main end) : les objets flexibles sont placés dans le conteneur à partir du début de l'axe et disposés au fur et à mesure vers la fin de l'axe principal.
• Dimension principale (main size) : la largeur ou la hauteur de l'élément selon sa dimension principale. La propriété associée est width ou height.
• Axe secondaire et dimension secondaire (cross axis, cross dimension) : l'axe perpendiculaire à l'axe principal est appelé l'axe secondaire.
• Début et fin de l'axe secondaire (cross-start, cross-end) : les lignes composées par les objets flexibles commencent au début de l'axe secondaire puis s'empilent au fur et à mesure vers la fin de l'axe secondaire.
• Dimension secondaire (cross size) : la largeur ou la hauteur de l'élément flexible selon la dimension secondaire.

Les propriétés liées aux conteneurs flexibles

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

Les propriétés liées aux objets flexibles

• order
• align-self
• flex-grow
• flex-shrink
• flex-basis

Les mixins liés aux boîtes flexibles

Voici un ensemble de mixins pour vous permettre de bidouiller avec les boîtes flexibles grâce au support natif des navigateurs actuels. Pour un tableau de la prise en charge des fonctionnalités liées à flexbox, veuillez consulter caniuse.com/flexbox.

Dans ces mixins, on utilisera :

• Des fallbacks avec l'ancienne syntaxe 'box'  (Firefox et les anciens WebKit) et les syntaxes préfixées (IE10, les navigateurs WebKit sans ajout de flex)
• La syntaxe finale standard (Firefox, Safari, Chrome, IE11, Opera)

Ces mixins ont été inspirés par : https://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

Et les articles suivants ont été d'une aide précieuse :

• https://w3.org/tr/css3-flexbox/
• https://the-echoplex.net/flexyboxes/
• https://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
• https://css-tricks.com/using-flexbox/
• https://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
• https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes

Les conteneurs flexibles

La valeur flex permet d'obtenir un conteneur flexible de bloc.

La valeur inline-flex permet d'obtenir un conteneur flexible en ligne (inline).

display: flex | inline-flex selon https://w3.org/tr/css3-flexbox/#flex-containers

@mixin flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

// Exemple d'utilisation
%flexbox { @include flexbox; }

@mixin inline-flex {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

%inline-flex { @include inline-flex; }

flex-direction

La propriété flex-direction indique la façon dont les objets flexibles sont organisés dans le conteneur flexible en définissant la direction principale du conteneur.

Valeurs possibles : row | row-reverse | column | column-reverse selon https://w3.org/tr/css3-flexbox/#flex-direction-property

@mixin flex-direction($value: row) {
  @if $value == row-reverse {
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -moz-box-direction: reverse;
    -moz-box-orient: horizontal;
  } @else if $value == column {
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
  } @else if $value == column-reverse {
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
    -moz-box-direction: reverse;
    -moz-box-orient: vertical;
  } @else {
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-direction: normal;
    -moz-box-orient: horizontal;
  }
  -webkit-flex-direction: $value;
  -ms-flex-direction: $value;
  flex-direction: $value;
}

// Version plus courte :
@mixin flex-dir($args...) { @include flex-direction($args...); }

flex-wrap

La propriété flex-wrap permet de contrôler si le conteneur flexible s'étend sur une ou sur un plusieurs lignes ainsi que la direction de l'axe secondaire (qui définit la direction dans laquelle les lignes sont « empilées »).

Valeurs possibles : nowrap | wrap | wrap-reverse
Valeur par défaut : nowrap

Spécification : https://w3.org/tr/css3-flexbox/#flex-wrap-property

@mixin flex-wrap($value: nowrap) {
  // No Webkit/FF Box fallback.
  -webkit-flex-wrap: $value;
  @if $value == nowrap {
    -ms-flex-wrap: none;
  } @else {
    -ms-flex-wrap: $value;
  }
  flex-wrap: $value;
}

flex-flow

La propriété flex-flow est une propriété raccourcie pour définir flex-direction et flex-wrap qui permettent respectivement de définir l'axe principal et l'axe secondaire.

Valeur par défaut : row nowrap

Spécification : https://w3.org/tr/css3-flexbox/#flex-flow-property

@mixin flex-flow($values: (row nowrap)) {
  // No Webkit/FF Box fallback.
  -webkit-flex-flow: $values;
  -ms-flex-flow: $values;
  flex-flow: $values;
}

order

La propriété order contrôle l'ordre dans lequel les éléments apparaissent dans le conteneur flexible en les affectant à des groupes ordinaux.

Valeur par défaut : 0

Spécification : https://w3.org/tr/css3-flexbox/#order-property

@mixin order($int: 0) {
  -webkit-box-ordinal-group: $int + 1;
  -moz-box-ordinal-group: $int + 1;
  -webkit-order: $int;
  -ms-flex-order: $int;
  order: $int;
}

flex-grow

La propriété flex-grow définit le facteur d'expansion flexible. Les nombres négatifs ne sont pas autorisés.

Valeur par défaut : 1

Spécification : https://w3.org/tr/css3-flexbox/#flex-grow-property

@mixin flex-grow($int: 1) {
  -webkit-box-flex: $int;
  -moz-box-flex: $int;
  -webkit-flex-grow: $int;
  -ms-flex: $int;
  flex-grow: $int;
}

flex-shrink

La propriété flex-shrink permet de définir le facteur de réduction des éléments flexibles. Les nombres négatifs ne sont pas autorisés.

Valeur par défaut : 0

Spécification : https://w3.org/tr/css3-flexbox/#flex-shrink-property

@mixin flex-shrink($int: 0) {
  -webkit-flex-shrink: 1 $int;
  -moz-flex-shrink: 1 $int;
  -ms-flex: 1 $int;
  flex-shrink: 1 $int;
}

flex-basis

La propriété flex-basis permet de définir la longueur de base à partir de laquelle s'étendre ou se réduire. Les longueurs négatives ne sont pas autorisées.

Valeurs : comme pour width.
Valeur par défaut : auto.

Spécification : https://www.w3.org/TR/css3-flexbox/#flex-basis-property

@mixin flex-basis($value: auto) {
  -webkit-flex-basis: $value;
  flex-basis: $value;
}

flex

La propriété raccourcie flex permet de définir les composants d'une longueur flexible : le facteur d'expansion (flex-grow), le facteur de réduction (flex-shrink) et la longueur de base (flex-basis). Lorsqu'un élément est un élément flexible, c'est flex qui sera utilisée (plutôt que width ou height) afin de déterminer la taille de l'élément. Si l'élément n'est pas un objet flexible, flex n'aura aucun effet.

Valeur par défaut : celles de propriétés détaillées (1 0 auto).

Spécification : https://w3.org/tr/css3-flexbox/#flex-property

@mixin flex($fg: 1, $fs: 0, $fb: auto) {

  // Définir une variable pour l'utiliser 
  // avec les propriétés box-flex
  $fg-boxflex: $fg;

  // Box-Flex ne prend qu'une valeur, on prend donc 
  // la première valeur de la liste et on la renvoie.
  @if type-of($fg) == 'list' {
    $fg-boxflex: nth($fg, 1);
  }

  -webkit-box: $fg-boxflex;
  -moz-box: $fg-boxflex;
  -webkit-flex: $fg $fs $fb;
  -ms-flexbox: $fg $fs $fb;
  flex: $fg $fs $fb;
}

justify-content

La propriété justify-content permet d'aligner les éléments flexibles le long de l'axe principal pour la ligne en cours dans le conteneur flexible. Cet alignement s'effectue après que les longueurs flexibles et les marges automatiques aient été résolues. Généralement, cela permet de distribuer l'espace restant entre les éléments d'une ligne qui ne sont pas flexibles ou qui ont atteint leur taille maximale. Cela contrôle également le comportement des éléments lorsqu'ils dépassent de la ligne.

Valeurs : flex-start | flex-end | center | space-between | space-around
Valeur par défaut : flex-start

Spécification : https://w3.org/tr/css3-flexbox/#justify-content-property

@mixin justify-content($value: flex-start) {
  @if $value == flex-start {
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
  } @else if $value == flex-end {
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
  } @else if $value == space-between {
    -webkit-box-pack: justify;
    -font-box-pack: justify;
    -ms-flex-pack: justify;
  } @else if $value == space-around {
    -ms-flex-pack: distribute;
  } @else {
    -webkit-box-pack: $value;
    -moz-box-pack: $value;
    -ms-flex-pack: $value;
  }
  -webkit-justify-content: $value;
  justify-content: $value;
}
  // Version plus courte :
  @mixin flex-just($args...) { @include justify-content($args...); }

align-items

Les objets flexibles peuvent être alignés le long de l'axe secondaire (comme pour justify-content mais dans l'axe perpendiculaire). align-items définit l'alignement par défaut de tous les objets du conteneur flexible. align-self permet aux objets flexibles de surcharger cette valeur (pour les objets anonymes, align-self correspondra toujours à align-items).

Valeurs : flex-start | flex-end | center | baseline | stretch
Défaut : stretch

Spécifications : Vhttps://w3.org/tr/css3-flexbox/#align-items-property

@mixin align-items($value: stretch) {
  @if $value == flex-start {
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
  } @else if $value == flex-end {
    -webkit-box-align: end;
    -moz-box-align: end;
    -ms-flex-align: end;
  } @else {
    -webkit-box-align: $value;
    -mox-box-align: $value;
    -ms-flex-align: $value;
  }
  -webkit-align-items: $value;
  align-items: $value;
}

align-self

Valeurs : auto | flex-start | flex-end | center | baseline | stretch
Valeur par défaut : auto

@mixin align-self($value: auto) {
  // No Webkit Box Fallback.
  -webkit-align-self: $value;
  @if $value == flex-start {
    -ms-flex-item-align: start;
  } @else if $value == flex-end {
    -ms-flex-item-align: end;
  } @else {
    -ms-flex-item-align: $value;
  }
  align-self: $value;
}

align-content

align-content permet d'aligner les lignes créées dans le conteneur flexible lorsqu'il reste de l'espace le long de l'axe secondaire. Cette propriété n'a aucun effet lorsqu'il n'y a qu'une seule ligne.

Valeurs : flex-start | flex-end | center | space-between | space-around | stretch
Valeur par défaut : stretch

Spécification : https://w3.org/tr/css3-flexbox/#align-content-property

@mixin align-content($value: stretch) {
  // No Webkit Box Fallback.
  -webkit-align-content: $value;
  @if $value == flex-start {
    -ms-flex-line-pack: start;
  } @else if $value == flex-end {
    -ms-flex-line-pack: end;
  } @else {
    -ms-flex-line-pack: $value;
  }
  align-content: $value;
}