Disposition de boîte flexible (Flexbox)

La disposition de boîte flexible (Flexbox) s’ajoute aux quatre modes de disposition de base définis dans CSS2.1 (Cascading Style Sheets, niveau 2, révision 1) : disposition de bloc, disposition en ligne, disposition de table et disposition positionnée. Avec la disposition Flexbox, vous pouvez mettre en forme des pages Web complexes plus facilement. Vous pouvez aussi ajuster la position et la taille relatives des éléments en fonction de la taille de l’écran et de la fenêtre du navigateur. Flexbox permet de réduire la dépendance vis-à-vis des éléments flottants et des dispositions basées sur des tableaux, qui sont plus compliqués à positionner et dimensionner correctement.

La disposition Flexbox vous permet d’effectuer facilement les tâches suivantes :

  • Créer une disposition fluide — même si vous utilisez différentes tailles d’écran et de fenêtre de navigateur — mais qui contient des éléments (tels que des images ou des contrôles) qui conservent leur position et leur taille les uns par rapport aux autres.
  • Spécifier comment réaffecter l’espace supplémentaire le long des axes de disposition (horizontal ou vertical) d’une série d’éléments pour augmenter la taille d’éléments donnés.
  • Spécifier comment réaffecter l’espace supplémentaire le long de l’axe de disposition d’une série d’éléments avant, après ou entre la série d’éléments.
  • Spécifier comment déplacer l’espace supplémentaire perpendiculaire à l’axe de disposition d’un élément dans la zone autour de l’élément (par exemple, au-dessus ou en dessous des boutons disposés côte-à-côte).
  • Contrôler la direction visuelle des éléments disposés sur la page (par exemple, de haut en bas, de gauche à droite, de droite à gauche ou de bas en haut) sans ajuster la propriété writing-mode spécifiée.
  • Réorganiser les éléments sur l’écran dans un ordre différent de celui spécifié par le modèle DOM (Document Object Model).

Cet exemple montre comment Flexbox permet de créer une mise en page sur trois colonnes classique pour des écrans plus larges qui est compressée en une mise en page sur une seule colonne pour les affichages plus étroits.

Exemple de code : http://samples.msdn.microsoft.com/workshop/samples/css/flexbox/flexbox.html

Conteneur Flexbox et éléments flex

Pour activer une disposition Flexbox, commencez par créer un conteneur flex. Un conteneur flex forme un bloc conteneur pour son contenu (éléments flex). Pour créer un conteneur flex, appliquez à un élément la propriété displayet affectez à celle-ci la valeur flex ou inline-flex :

display: flex | inline-flex

Si vous affectez la valeur flex à la propriété display, un élément se comporte comme une boîte de conteneur flex de niveau bloc. Une boîte de conteneur flex de niveau bloc occupe toute la largeur disponible à l’intérieur de son conteneur parent. Si vous affectez la valeur inline-flex à la propriété display, un élément se comporte comme une boîte de conteneur flex insérée (celle-ci occupe seulement l’espace dont elle a besoin et ne force pas la création de nouvelles lignes).

Par rapport aux autres éléments situés à l’extérieur du conteneur flex, les conteneurs flex insérés agissent de manière semblable aux images. Les conteneurs flex de niveau bloc se agissent de manière semblable à un élément div normal.

Un conteneur flex peut contenir zéro ou plusieurs éléments flex. Chaque enfant du conteneur flex devient un élément flex. Le texte se trouvant à l’intérieur du conteneur flex est agencé dans un élément flex anonyme. Cependant, si l’élément flex anonyme contient uniquement des espaces blancs, il n’est pas restitué. Cela revient à lui affecter la propriété display:none. Vous pouvez manipuler le conteneur flex et les éléments flex à l’intérieur du conteneur flex à l’aide des propriétés flex, flex-basis, flex-grow, flex-shrink, flex-flow, flex-direction, flex-wrap, align-items, align-self, align-content, justify-content et order.

Définition de l’orientation, de l’agencement et de l’ordre de la boîte flexible

Lors de la création d’un conteneur flex, vous pouvez spécifier l’orientation de tous les éléments enfants situés dans le conteneur. La propriété flex-direction définit la direction de l’axe principal du conteneur flex ou l’axe principal le long duquel les éléments flex sont disposés. La propriété flex-direction vous permet de spécifier si les enfants sont affichés de droite à gauche, de gauche à droite, de haut en bas ou de bas en haut.

Vous pouvez aussi spécifier la façon dont les éléments flex sont agencés lorsque le conteneur flex est redimensionné. La propriété flex-wrap spécifie si les éléments enfants sont agencés sur une ou plusieurs lignes/colonnes.

Parfois, il est plus facile de définir flex-direction et flex-wrap ensemble à l’aide de la propriété raccourcie flex-flow. Ensemble, ces deux sous-propriétés définissent l’axe principal et l’axe transversal du conteneur.

flex-flow: <flex-direction> || <flex-wrap>

Si nécessaire, la propriété order peut réorganiser visuellement les éléments flex. Par défaut, les éléments flex dans un conteneur flex sont affichés dans le même ordre que dans le document source, sauf indication contraire par cette propriété.


#flexContainer { 
  display: flex;
  flex-flow: row wrap;
} 
#item1 {
  width: 120px;
  background:#6ABD27;
  order: 2;
}
#item2 {
  width: 120px;
  background:#00A6EE;
  order: 3;
}
#item3 {
  width: 120px;
  background:#6ABD27;
  order: 1;
}


<div id="flexContainer">
   <div id="item1">1</div>
   <div id="item2">2</div>
   <div id="item3">3</div>
</div>

Dans l’extrait de code CSS ci-dessus, la première sous-valeur de propriété, row, du raccourci flex-flow définit l’axe principal du conteneur flex selon la même orientation que l’axe inséré du mode d’écriture en cours. Dans cet exemple, et par défaut, le mode d’écriture va de gauche à droite et de haut en bas. La deuxième sous-valeur de propriété, wrap, du raccourci flex-flow ci-dessus spécifie que les éléments flex sont agencés et affichés dans des lignes parallèles successives. Ici, le conteneur flex s’étend en hauteur, perpendiculairement à l’axe défini par la propriété writing-mode, pour tenir compte des lignes supplémentaires lorsque le conteneur flex est redimensionné.

Éléments HTML utilisant une boîte flexible.

Si la taille du conteneur flex est réduite, les éléments flex s’affichent sur des lignes distinctes, comme indiqué dans la propriété flex-flow illustrée sur cette image. La propriété order est également utilisée. Ainsi, les éléments flex n’apparaissent pas dans le même ordre que celui indiqué dans le document source.

Définition de l’alignement Flexbox

Vous pouvez aussi définir l’alignement du contenu du conteneur flex le long de l’axe principal et le long de l’axe transversal (perpendiculairement à l’axe principal) une fois les longueurs flexibles et les marges automatiques résolues. Les propriétés justify-content, align-items, align-self et align-content vous permettent d’ajuster cet alignement.

À l’aide de la propriété justify-content, vous pouvez définir la façon dont les éléments flex sont alignés le long de l’axe principal du conteneur flex une fois les longueurs flexibles et les marges automatiques résolues. L’image suivante montre les valeurs de justify-content et leurs effets sur un conteneur flex contenant trois éléments flex.

Illustration montrant les valeurs de justify-content

Pour ajuster davantage l’alignement, vous pouvez également ajuster l’alignement de l’axe transversal du conteneur flex à l’aide de la propriété align-items. L’axe transversal est l’axe qui est perpendiculaire à l’axe principal. L’image suivante montre les valeurs de align-items et leurs effets sur un conteneur flex contenant trois éléments flex.

Il est également possible de remplacer la valeur affectée à l’ensemble des éléments flex dans align-items en spécifiant la propriété align-self sur un élément flex. Align-self définit la valeur d’alignement (perpendiculaire à l’axe de disposition défini par la propriété flex-direction) des éléments flex. La valeur initiale est auto, ce qui signifie par défaut que la propriété align-self est égale à la propriété align-items du parent. La propriété align-items utilise les mêmes valeurs, avec en plus auto, comme align-items. L’image ci-dessus illustre ces valeurs et leurs effets.

Illustration montrant les valeurs de align-properties

Vous pouvez ajuster davantage l’alignement à l’aide de la propriétéalign-content, qui agit de manière semblable à la propriété justify-content. Toutefois, la propriété align-content n’a d’effet que lorsque la disposition Flexbox comprend plusieurs lignes. La propriété align-content aligne les lignes du conteneur flex dans le conteneur lorsqu’un espace supplémentaire se trouve dans l’axe transversal. Cette image montre les valeurs de align-content et leurs effets sur un conteneur flex contenant trois éléments flex.

Illustration montrant les valeurs d’align-items et d’align-content

Définition de la flexibilité

Si nécessaire, vous pouvez modifier la largeur et la hauteur des éléments flex pour remplir l’espace dans le conteneur flex. Pour cela, vous pouvez utiliser la propriété raccourcie flex. Le conteneur flex répartit l’espace disponible entre ses éléments proportionnellement à leur facteur de croissance flexible, ou il réduit ses éléments afin d’éviter leur débordement proportionnellement à leur facteur de rétrécissement flexible.

La propriété raccourcie flex est définie à l’aide de trois sous-propriétés : flex-grow, flex-shrink et flex-basis.

flex: none | [<flex-grow> <flex-shrink>? || <flex-basis>]

#flexContainer { 
  display: flex;
  flex-flow: row wrap;
} 
#item1 {
  width: 120px;
  background:#6ABD27;
  flex: 1 1 auto;
}
#item2 {
  width: 120px;
  background:#00A6EE;
  flex: 1 1 auto;
}
#item3 {
  width: 120px;
  background:#6ABD27;
  flex: 1 1 auto;
}


<div id="flexContainer">
   <div id="item1">flex item 1</div>
   <div id="item2">flex item 2</div>
   <div id="item3">flex item 3</div>
</div>

Dans l’exemple ci-dessus, la première sous-valeur dans la propriété raccourcie flex correspond à la propriété flex-grow. Cette propriété contrôle le facteur de croissance flexible, c’est-à-dire dans quelle mesure l’élément flex croît par rapport aux autres éléments du conteneur flex. La deuxième sous-valeur correspond à la propriété flex-shrink. Cette propriété contrôle dans quelle mesure l’élément flex rétrécit par rapport aux autres éléments du conteneur flex. La troisième sous-valeur correspond à la propriété flex-basis. Cette propriété spécifie la taille principale initiale de l’élément flex avant la distribution de l’espace disponible. La taille principale initiale est la largeur ou la hauteur d’un élément flex le long de l’axe principal. La valeur initiale est auto, qui extrait la valeur de la taille principale du conteneur flex.

Dans cet exemple, les éléments flex sont entièrement flexibles et absorbent tout l’espace disponible le long de l’axe principal.

Informations de référence sur les API

Flexible Box ("Flexbox") Layout

Exemples et didacticiels

Exemple de disposition Flexbox CSS
Concevoir des sites Web adaptatifs

Démonstrations du site Internet Explorer Test Drive

Hands On: CSS3 Flexible Box Layout

Billets IEBlog

Aperçu de la plateforme IE10 et fonctionnalités CSS pour les dispositions adaptatives

Spécification

W3C CSS Flexible Box Layout Module

 

 

Afficher:
© 2014 Microsoft