Disposition de boîte flexible (« Flexbox ») dans Internet Explorer 10

Remarque  Ce contenu concerne CSS Flexible Box sur Internet Explorer 10. Pour découvrir les informations les plus récentes sur Flexbox, voir Disposition de boîte flexible.

Attention  Internet Explorer 11 ne prend plus en charge la version du préfixe de fournisseur Microsoft (« -ms- ») des propriétés de boîte flexible. Vous devez maintenant utiliser les noms sans préfixe, car cette approche garantit une meilleure conformité aux normes et une meilleure compatibilité ultérieure. Pour obtenir un résumé des modifications et des meilleures pratiques, voir Mises à jour de disposition de boîte flexible (« Flexbox »).

Internet Explorer 10 et les applications du Windows Store en JavaScript dans Windows 8 introduisent la prise en charge du module Disposition de boîte flexible CSS (« Flexbox »). Le module Flexbox est, à l’heure où nous écrivons, une ébauche proposée par le W3C (World Wide Web Consortium). (L’implémentation de Flexbox dans Internet Explorer 10 repose sur la version du 22 mars 2012 de l’ébauche Flexbox.) Flexbox s’ajoute aux quatre modes de disposition de base définis dans CSS2.1 (Cascading Style Sheets, niveau 2, révision 1) (et activés via la propriété display) : disposition de bloc, disposition en ligne, disposition de table et disposition positionnée. La disposition Flexbox est conçue pour la disposition des pages Web plus complexes. Elle est particulièrement utile lorsque vous souhaitez définir une position et une taille relatives constantes pour les éléments quelle que soit la taille de l’écran ou de la fenêtre du navigateur. Flexbox permet de réduire la dépendance vis-à-vis des éléments flottants, qui sont plus compliqués à positionner et dimensionner correctement.

La disposition Flexbox tient compte de l’espace disponible lors de la définition des dimensions d’une zone, ce qui permet des tailles et un positionnement relatifs. Par exemple, vous pouvez veiller à ce que les espaces supplémentaires dans une fenêtre de navigateur soient répartis équitablement entre la taille de plusieurs éléments enfants, et à ce que ces éléments enfants soient centrés dans le bloc conteneur.

Avec la disposition Flexbox, vous pouvez :

  • 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 l’espace supplémentaire le long de l’axe de disposition (horizontal ou vertical) d’une série d’éléments peut être alloué proportionnellement pour augmenter la taille d’éléments donnés.
  • Spécifier comment l’espace supplémentaire le long de l’axe de disposition d’une série d’éléments peut être alloué avant, après ou entre la série d’éléments.
  • Spécifier comment l’espace supplémentaire perpendiculaire à l’axe de disposition d’un élément peut être disposé autour de l’élément ; par exemple, au-dessus ou au-dessous des boutons disposés côte à côte.
  • Contrôler l’orientation 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.
  • Réorganiser les éléments sur l’écran dans un ordre différent de celui spécifié par le DOM (Document Object Model).

Conteneur Flexbox

Pour activer la disposition Flexbox, vous devez d’abord créer un conteneur Flexbox. Pour ce faire, définissez la propriété display d’un élément en lui attribuant la valeur "-ms-flexbox" (pour un conteneur Flexbox sous forme de bloc) ou "-ms-inline-flexbox" (pour un conteneur Flexbox inséré). (En raison de l’état préliminaire du module Disposition de boîte flexible CSS, cette valeur et toutes les propriétés de cette section doivent être utilisées avec le préfixe Microsoft « -ms- » pour fonctionner avec Internet Explorer 10 et les applications du Windows Store en JavaScript dans Windows 8.) Par exemple, l’exemple de code suivant crée un conteneur Flexbox sous forme de bloc dans l’élément dont l’ID est "myFlexbox" :


<style type="text/css">
#myFlexbox {
  display: -ms-flexbox;
  background: gray;
  border: blue;
}
</style>


Définition de l’orientation Flexbox

Quand vous créez un conteneur Flexbox, vous pouvez également définir son orientation — c’est-à-dire spécifier si ses enfants sont affichés de la droite vers la gauche, de la gauche vers la droite, du haut vers le bas ou du bas vers le haut. La propriété suivante fait ce qui suit :

PropriétéDescription

-ms-flex-direction

Spécifie l’orientation dans la disposition de tous les éléments enfants de l’objet.

Cette propriété peut avoir pour valeur les mots clés suivants :

row

Il s’agit de la valeur initiale. Les éléments enfants sont affichés dans le même ordre que celui dans lequel ils sont déclarés dans le document source, de la gauche vers la droite.

Exemple de propriété -ms-box-orient:horizontal
column

Les éléments enfants sont affichés dans le même ordre que celui dans lequel ils sont déclarés dans le document source, du haut vers le bas.

Exemple de propriété -ms-box-orient:vertical
row-reverse

Les éléments enfants sont affichés dans le même ordre que celui dans lequel ils sont déclarés dans le document source, de la droite vers la gauche.

Exemple de propriété -ms-box-direction:normal
column-reverse

Les éléments enfants sont affichés dans le même ordre que celui dans lequel ils sont déclarés dans le document source, du bas vers le haut.

inherit

Les éléments enfants sont affichés dans le même ordre que celui de la valeur calculée de cette propriété pour l’élément parent.

 

Par exemple, le sélecteur d’ID suivant a ajouté la propriété -ms-flex-direction et lui a attribué la valeur row :


<style type="text/css">
#myFlexbox
{
  display: -ms-flexbox;
  -ms-flex-direction: row;
  background: grey;
  border: blue;
}
</style>


Définition de l’alignement Flexbox

Quand vous créez un conteneur Flexbox, vous pouvez également définir son alignement — c’est-à-dire spécifier dans quel sens ses enfants doivent être affichés, en restant perpendiculaire à l’axe de disposition défini par la propriété -ms-flex-direction.

PropriétéDescription

-ms-flex-align

Spécifie l’alignement (perpendiculaire à l’axe de disposition défini par la propriété -ms-flex-direction) des éléments enfants de l’objet.

Cette propriété peut avoir pour valeur les mots clés suivants. Sachez que ces derniers sont des mots clés dépendants du writing-mode. Les bords de début et de fin de l’élément parent et des éléments enfants dépendent de la direction de la disposition. Par exemple, pour une disposition de gauche à droite, le bord de début est le bord supérieur de l’élément parent. Pour une disposition de haut en bas, le bord de début est le bord gauche de l’élément parent, et ainsi de suite. De même, dans une disposition de gauche à droite, le bord de fin des éléments enfants est le bord inférieur. Dans une disposition de haut en bas, le bord de fin des éléments enfants est le bord droit, et ainsi de suite.

start

Si l’élément parent a une valeur calculée row ou column pour -ms-flex-direction, le bord de début (ou la ligne de base) de chaque élément enfant est aligné sur le bord de début de l’objet. Tout l’espace restant, perpendiculaire à l’axe de la disposition, est placé après le bord de fin de chaque élément enfant.

Si l’élément parent a une valeur calculée row-reverse ou column-reverse pour -ms-flex-direction, le bord de fin (ou la ligne de base) de chaque élément enfant est aligné sur le bord de fin de l’objet. Tout l’espace restant, perpendiculaire à l’axe de la disposition, est placé avant le bord de début de chaque élément enfant.

Exemple de propriété -ms-box-align:before
end

Si l’élément parent a une valeur calculée row ou column pour -ms-flex-direction, le bord de fin de chaque élément enfant est aligné sur le bord de fin de l’objet. Tout l’espace restant, perpendiculaire à l’axe de la disposition, est placé avant le bord de début de chaque élément enfant.

Si l’élément parent a une valeur calculée row-reverse ou column-reverse pour -ms-flex-direction, le bord de début de chaque élément enfant est aligné sur le bord de début de l’objet. Tout l’espace restant, perpendiculaire à l’axe de la disposition, est placé après le bord de fin de chaque élément enfant.

Exemple de propriété -ms-box-align:after
center

Chaque élément enfant est centré entre les bords de début et de fin de l’objet. Tout l’espace restant, perpendiculaire à l’axe de la disposition, est équitablement réparti avant et après chaque enfant.

Exemple de propriété -ms-box-align:middle
stretch

Il s’agit de la valeur initiale. Chaque élément enfant est étiré de manière à remplir entièrement l’espace disponible perpendiculaire à l’axe de la disposition. Lorsqu’elle est définie, la propriété max-width ou max-height d’un élément enfant est prioritaire et la disposition suit la règle start.

Exemple de propriété -ms-box-align:stretch
baseline

Les lignes de base (bord de début ou bord de fin en fonction de la propriété -ms-flex-direction) de tous les éléments enfants sont alignées les unes par rapport aux autres.

L’élément enfant qui occupe le plus d’espace, perpendiculaire à l’axe de la disposition, suit la règle start. Les lignes de base de tous les éléments restants sont ensuite alignées sur la ligne de base de cet élément.

Exemple de propriété -ms-box-align:baseline

 

Par exemple, le sélecteur d’ID suivant a ajouté la propriété -ms-flex-align et lui a attribué la valeur start :


<style type="text/css">
#myFlexbox
{
  display: -ms-flexbox;
  -ms-flex-align: start;
  background: grey;
  border: blue;
}
</style>


Distribution de l’espace entre les éléments enfants Flexbox

Vous pouvez spécifier la distribution de l’espace entre les éléments enfants Flexbox à l’aide de la propriété suivante :

PropriétéDescription

-ms-flex-pack

Spécifie comment l’espace supplémentaire est distribué (le long de l’axe défini par la propriété -ms-flex-direction) entre les éléments enfants de l’objet.

Les valeurs possibles pour cette propriété sont les mots clés suivants. Ils sont dépendants des mots clés writing-mode ; les bords de début et de fin de l’élément enfant et des éléments parents dépendent de la direction de la disposition. Par exemple, pour une disposition de gauche à droite, le bord de début est le côté gauche de l’élément parent. Pour une disposition de haut en bas, le bord de début est le bord supérieur, etc. De la même façon, le bord de fin d’un élément enfant est le bord droit dans une disposition de gauche à droite, le bord inférieur dans une disposition de haut en bas, et ainsi de suite.

start

Il s’agit de la valeur initiale. Le bord de début du premier élément enfant est placé au début de l’élément parent ; lez bord de début de l’élément enfant suivant est placé bord à bord avec le bord de fin du premier élément enfant, etc. le long de la direction de l’axe de disposition. L’espace restant le long de l’axe est placé à la fin de l’axe de disposition.

Exemple de propriété -ms-box-pack:start
end

Le bord de fin du premier élément enfant est placé à la fin de l’élément parent. Le bord de fin de l’élément enfant suivant est placé bord à bord avec le bord de début du premier élément enfant, etc. le long de la direction de l’axe de disposition. L’espace restant le long de l’axe de disposition est placé au début de l’axe de disposition.

Exemple de propriété -ms-box-pack:end
center

Tous les éléments enfants sont placés bord à bord, comme indiqué dans les descriptions des mots clés start ou end. Cependant, le groupe d’éléments enfants est centré entre les bords de début et de fin de l’élément parent afin que l’espace restant soit distribué avant le premier élément enfant et après le dernier élément enfant.

Exemple de propriété -ms-box-pack:center
justify

Le bord de début du premier élément enfant est placé au début de l’élément parent. Le bord de fin du dernier élément enfant est placé bord à bord avec la fin de la zone parente ; et tous les enfants restants sont placés entre le premier et le dernier éléments enfants, afin que l’espace restant le long de l’axe de disposition soit distribué entre les éléments enfants.

Exemple de propriété -ms-box-pack:justify

 

Par exemple, le sélecteur d’ID suivant a ajouté la propriété -ms-flex-pack et lui a attribué la valeur justify :


<style type="text/css">
#myFlexbox
{
  display: -ms-flexbox;
  -ms-flex-pack: justify;
  background: grey;
  border: blue;
}
</style>


Activation du renvoi à la ligne suivante de l’élément enfant

Vous pouvez permettre aux éléments enfants Flexbox qui débordent de s’agencer sur la ligne suivante et contrôler la direction du flux à l’aide de la propriété suivante :

PropriétéDescription

-ms-flex-wrap

Spécifie si les éléments enfants s’agencent sur plusieurs lignes ou colonnes en fonction de l’espace disponible dans l’objet.

Cette propriété peut avoir pour valeur les mots clés suivants :

none

Il s’agit de la valeur initiale. Tous les éléments enfants sont affichés sur une seule ligne ou colonne. La propriété overflow de l’objet détermine si les éléments enfants sont masqués, coupés ou avec défilement.

wrap

Les éléments enfants sont agencés et affichés en lignes ou colonnes parallèles successives. L’objet s’étend en hauteur ou en largeur, perpendiculaire à l’axe défini par la propriété writing-mode afin de prendre en compte les lignes ou colonnes supplémentaires.

Exemple de propriété -ms-box-line-progression:normal
wrap-reverse

Les éléments enfants sont agencés et affichés en lignes ou colonnes parallèles successives, en ordre inverse. L’objet s’étend en hauteur ou en largeur, perpendiculaire à l’axe défini par la propriété writing-mode afin de prendre en compte les lignes ou colonnes supplémentaires.

Exemple de propriété -ms-box-line-progression:reverse

 

Notez qu’Internet Explorer 10 tente de placer les éléments enfants d’une boîte parent sur le moins de lignes possible en réduisant toutes les boîtes à la taille minimale. Un élément qui ne tient pas sur sa ligne est coupé à la fin de la ligne.

Par défaut, des lignes supplémentaires sont ajoutées pour conserver la direction de bloc. Dans les dispositions de gauche à droite et de droite à gauche, de nouvelles lignes sont ajoutées sous les lignes existantes (sauf si une direction de bloc de haut en bas a été explicitement définie ailleurs). De même, de nouvelles lignes apparaissent à droite ou à gauche de la disposition verticale en fonction de la direction de bloc, qui peut être de gauche à droite ou de droite à gauche, selon la direction de l’écriture ou d’autres paramètres spécifiques.

Par exemple, le sélecteur d’ID suivant a ajouté la propriété -ms-flex-wrap et lui a attribué la valeur wrap :


<style type="text/css">
#myFlexbox
{
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  background: grey;
  border: blue;
}
</style>


Ajout d’éléments enfants Flexbox

Le conteneur Flexbox étant créé, vous pouvez y ajouter des éléments enfants. Pour ajouter un élément enfant au conteneur Flexbox, faites en sorte que cet élément soit un enfant immédiat de l’élément Flexbox, comme le montre le balisage suivant :


<style type="text/css">
#myFlexbox {
  background: gray;
  border: blue;
  display: -ms-flexbox;
}
#child1 {
  background: maroon; 
  border: orange solid 1px;
}
#child2 {
  background: lightgray;
  border: red solid 1px;
}
</style>
<body>
<div id="myFlexbox">
  <div id="child1">child 1</div>
  <div id="child2">child 2</div>
</div>
...
</body>


Définition de la flexibilité d’un élément enfant

Vous pouvez déterminer la manière de répartir l’espace en trop sur l’axe de disposition de la boîte parent proportionnellement aux éléments enfants. La propriété -ms-flex vous permet de rendre les éléments Flexbox « flexibles » en modifiant leur largeur ou leur hauteur afin de remplir l’espace disponible. Un conteneur Flexbox répartit l’espace disponible entre ses éléments proportionnellement à leur flexibilité positive, ou il réduit ses éléments afin d’éviter leur débordement proportionnellement à leur flexibilité négative.

Quand l’élément contenant la propriété -ms-flex est un élément Flexbox, la propriété -ms-flex est consultée à la place des propriétés width ou height pour déterminer la taille principale de l’élément. (Si un élément n’est pas un élément Flexbox, la propriété -ms-flex est sans effet.)

PropriétéDescription

-ms-flex

Spécifie si la largeur ou la hauteur d’un élément enfant est flexible en fonction de l’espace disponible dans l’objet. Cette valeur indique également la proportion d’espace disponible allouée à l’élément enfant. Sa syntaxe est la suivante :


-ms-flex: <positive-flex> <negative-flex> <preferred-size>

Cette propriété peut se voir attribuer l’une des valeurs suivantes ou none.

<positive-flex>

Entier qui définit la flexibilité positive. Si elle est omise, la flexibilité positive de l’élément a la valeur « 1 ». Les valeurs négatives ne sont pas valides.

<negative-flex>

Entier qui définit la flexibilité négative. Si elle est omise, la flexibilité négative de l’élément a la valeur « 0 ». Les valeurs négatives ne sont pas valides.

<preferred-size>

Définit la taille par défaut de l’élément Flexbox. Cela peut être n’importe quelle valeur valide pour les propriétés width ou height, à l’exception de inherit. Si elle est omise, la taille par défaut est "0px". Si le composant <preferred-size> a la valeur auto sur un enfant d’un élément Flexbox, la taille par défaut est la valeur de la propriété width ou height property (selon la propriété parallèle à l’axe principal) de l’élément Flexbox.

none

Il s’agit de la valeur initiale. Équivaut à attribuer à -ms-flex la valeur "0 0 auto".

 

Regroupement des éléments enfants Flexbox

Vous pouvez regrouper les éléments enfants Flexbox en utilisant un numéro de groupe pour contrôler l’ordre dans lequel chaque élément est rendu le long de l’axe de disposition, même si cet ordre est différent de l’ordre DOM. Pour définir le regroupement, utilisez la propriété suivante :

PropriétéDescription

-ms-flex-order

Spécifie le groupe ordinal auquel appartient un élément Flexbox. Cet entier identifie l’ordre d’affichage (le long de l’axe défini par la propriété -ms-flex-direction) du groupe.

Les valeurs doivent être des entiers supérieurs à zéro. La valeur initiale de cette propriété est "0".

 

La propriété -ms-flex-order vous permet de placer les éléments dans des groupes ordinaux, en commençant par le groupe ordinal 0. Tous les éléments enfants dans chaque groupe ordinal sont rendus le long de l’axe de la disposition spécifié avant que les éléments enfants du groupe ordinal suivant ne soient rendus. Par conséquent, tous les éléments enfants du groupe ordinal 0 sont rendus avant les éléments enfants du groupe ordinal 1, et ainsi de suite. Les éléments dans les groupes ordinaux sont rendus dans l’ordre du DOM. Par défaut, des lignes supplémentaires sont ajoutées en conservant la direction de bloc.

Par exemple, le balisage suivant définit quatre éléments enfants et attribue à la plupart d’entre eux une valeur ordinale à l’aide de la propriété -ms-flex-order :

  • La propriété -ms-flex-order de child1 a la valeur "1"
  • La propriété -ms-flex-order de child2 a la valeur "0" (valeur initiale)
  • La propriété -ms-flex-order de child3 a la valeur "0"
  • child4 n’a pas de propriété -ms-flex-order, ce qui signifie que la valeur -ms-flex-order initiale, "0", lui est attribuée

<style type="text/css">
#myFlexbox {
  display: -ms-flexbox;
  color: white;
  font-size: 48px;
  font-family: "Segoe UI", "Lucida Grande", Verdana, Arial, sans-serif;
  text-align: left;
  height: 200px;
  border: none;
}
#child1 {
  -ms-flex-order: 1;
  background: #43e000;  
  padding: 20px;
}
#child2 {
  -ms-flex-order: 0;
  background: #166aff;
  padding: 20px;
}
#child3 {
  -ms-flex-order: 1;
  background: #43e000;
  padding: 20px;
}
#child4 {
  background: #166aff;
  padding: 20px;
}
</style>
</head>
<body>
<div id="myFlexbox">
  <div id="child1">1</div>
  <div id="child2">2</div>
  <div id="child3">3</div>
  <div id="child4">4</div>
</div>
</body>


child2 et child4 sont tous deux dans le groupe ordinal 0, et child1 et child3 sont dans le groupe ordinal 1. Dans la mesure où dans chaque groupe ordinal, les éléments enfants sont rendus selon l’ordre DOM, ces éléments apparaissent dans l’ordre suivant dans l’élément Flexbox parent : child2, child4, child1, child3. Cela est illustré dans la capture d’écran suivante :

Capture d’écran de l’exemple précédent dans une fenêtre de navigateur

Vous pouvez afficher cette page. (Internet Explorer 10 est requis pour afficher cette page correctement.)

Rubriques connexes

Disposition de boîte flexible (Flexbox)

 

 

Afficher:
© 2014 Microsoft