Les propriétés CSS de la famille box...

Description des propriétés box....

Ces propriétés étaient un premier brouillon de travail pour la définition des flex-box. Elles ont finalement été remplacées par d'autres propriétés dont nous donnons la liste ci-après.

Ces propriétés s'appliquent aux containers du type box, et ces derniers peuvent être déclarés avec la propriété display :

Descriptions rapides de ces propriétés.

• box-align : alignement suivant l'axe secondaire des éléments contenus dans le container box.
• box-direction : indique si les éléments contenus dans le container box se positionnent de gauche à droite ou de droite à gauche.
• box-flex : définit dans quelle proportion un élément contenu dans un container box peut s'agrandir pour remplit la place disponible. Cette propriété s'applique sur un ou des éléments contenus dans le container et non pas sur le container lui-même.
• box-lines : définit si les éléments dans un container box peuvent se répartir sur plusieurs lignes ou non.
• box-ordinal-group : définit la position d'un des éléments du container box par rapport aux autres. Cette propriété s'applique sur un des éléments contenus dans le container et non pas sur le container lui-même.
• box-orient : indique suivant quelle orientation se positionnent les éléments dans le container box : horizontalement ou verticalement. Cela définit donc également l'axe principal du container.
• box-pack : définit l'alignement suivant l'axe principal des éléments contenus dans le container box.
• box-reflect : dédouble le container box, avec tous les éléments qu'il contient, en lui appliquant un effet de symétrie (effet miroir).

Syntaxes pour box-align.

• box-align: start; box-align: center; box-align: end; box-align: stretch; box-align: baseline;

  box-align définit comment se répartissent les éléments à l'intérieur d'un container box, suivant l'axe secondaire. Le plus souvent le container a un axe principal qui est horizontal, box-align répartit donc les éléments dans le sens vertical.

  Voici comment interpréter les valeurs start et end en fonction de la valeur donnée à box-orient.

  	start	end
  box-orient:horizontal;	Haut	Bas
  box-orient:vertical;	Gauche	Droite

Syntaxes pour box-direction.

• box-direction: normal; box-direction: reverse;

  Définit le sens dans lequel les éléments internes au container doivent se positionner : de gauche à droite (normal) ou de droite à gauche (reverse).

Syntaxes pour box-lines.

• box-lines: single; box-lines: multiple;

  Définit si les éléments dans un container box peuvent se répartir sur plusieurs lignes ou non.

Syntaxes pour box-flex.

• box-flex: 1;

  La propriété box-flex doit être appliquée à un élément interne du container box et non pas au container lui-même. Elle indique si l'élément peut, et dans quelles proportions, s'agrandir pour remplir l'espace disponible dans le container.

Syntaxes pour box-ordinal-group.

• box-ordinal-group: 1;

  La propriété box-ordinal-group s'applique également à un élément à l'intérieur du container. Elle permet de réordonner les éléments. Ceux-ci sont en effet classés suivant la valeur donnée à box-ordinal-group. En cas de valeurs identiques, c'est l'ordre du document (le fichier HTML) qui donne l'ordre des éléments.

Syntaxes pour box-orient.

• box-orient: horizontal; box-orient: vertical; box-orient: block-axis; box-orient: inline-axis ;

  box-orient définit l'axe principal du container box.

Syntaxes pour box-pack.

• box-pack: start; box-pack: center; box-pack: end; box-pack: justify;

  box-pack définit comment les éléments se positionnent à l'intérieur du container box, suivant l'axe principal. Le plus souvent, il s'agit du positionnement horizontal.

  Firefox prend en compte la valeur de la propriété flex-direction pour ajuster les valeurs start et end.

Simulateur avec le préfixe -moz-.

Les deux simulateurs ci-dessous utilisent, pour le premier le préfixe -moz-, et pour le deuxième le préfixe -webkit-. Ils permettent de simuler l'effet des propriétés qui s'appliquent sur un container box.

Simulateur avec le préfixe -webkit-.

Prise en charge par les navigateurs (compatibilité).

Toutes ces propriétés sont obsolètes : les navigateurs peuvent cesser à tout moment de les reconnaître, même avec les préfixes -moz- et -webkit-. Fort heureusement, elles ont un équivalent normalisé (voir plus haut).

Voir aussi, dans le même module de standardisation que box-align.

Les spécifications CSS éditées par le W3C sont organisées en modules. box-align fait partie du CSS 3 - Spécification concernant les feuilles de styles en cascade - Version 3 (Cascading Style Sheets specification - Version 3). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.