Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

box-pack

Avertissement : Cette propriété fait partie de la première version du standard pour les boîtes flexibles (flexbox) et sera remplacée dans une prochaine version.

Voir la page Flexbox pour plus d'informations.

Les propriétés CSS -moz-box-pack et -webkit-box-pack définissent la façon dont une boîte -moz-box ou -webkit-box groupe son contenu dans la direction de la disposition. L'effet de cette propriété n'est visible que s'il reste de l'espace supplémentaire dans la boîte. Pour plus de détails, se référer à la page Flexbox qui décrit les différentes propriétés des boîtes flexibles.

La direction de la disposition dépend de l'orientation de l'élément : horizontale ou verticale.

Valeur initialestart
Applicabilitééléments dont CSS display vaut -moz-box, -moz-inline-box, -webkit-box ou -webkit-inline-box
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Animablenon
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/*  Valeurs avec un mot-clé */
box-pack: start;
box-pack: center;
box-pack: end;
box-pack: justify;

/* Valeurs globales */
box-pack: inherit;
box-pack: initial;
box-pack: unset;

Valeurs

start
La boîte regroupe son contenu au début. L'espace restant est donc laissé à la fin.
center
La boîte regroupe son contenu au centre. L'espace restant est divisé de façon égale entre le début et la fin.
end
La boîte regroupe son contenu à la fin. L'espace restant est donc laissé au début.
justify
L'espace est réparti entre chacun des éléments fils sans qu'un espace soit placé avant le premier fils ou après le dernier. S'il y a un seul élément fils, la valeur est synonyme de start.

Syntaxe formelle

start | center | end | justify

Exemples

CSS

div.exemple {
  border-style: solid;

  display: -moz-box; /* Mozilla */
  display: -webkit-box; /* WebKit */

  /* On rend la boîte plus grande que son
     contenu pour avoir de l'espace pour box-pack */
  height: 300px;
  /* On rend la boîte suffisament large pour que 
     contenu soit centré horizontalemen */
  width: 300px;
  
  /* On oriente les éléments fils verticalement */
  -moz-box-orient: vertical; /* Mozilla */
  -webkit-box-orient: vertical; /* WebKit */

  /* On aligne les fils sur le centre horizontal */
  -moz-box-align: center; /* Mozilla */
  -webkit-box-align: center; /* WebKit */

  /* On groupe les éléments fils en bas de la boîte */
  -moz-box-pack: end;             /* Mozilla */
  -webkit-box-pack: end;          /* WebKit */
}

div.exemple p {
  /* On réduit les éléments fils, pour
     qu'il y ait de la place pour box-align */
  width: 200px;
}

HTML

<div class="exemple">
  <p>Je serai 2nd en partant du bas de div.exemple, centré horizontalement.</p>
  <p>Je serai tout en bas de div.exemple, centré horizontalement.</p>
</div>

Résultat

Notes

Le « début » et la « fin » de la boîte dépendent de l'orientation et de la direction de la boîte. Voici le tableau indiquant le début de la boîte en fonction de l'orientation et de la direction :

  Normal Inverse
Horizontal gauche droit
Vertical hau bas

Si le regroupement utilise l'attribut pack de l'élément, le style est ignoré.

Spécifications

Cette propriété n'est pas standard mais une propriété semblable est apparue avec les brouillons de spécification pour les boîtes flexibles CSS3 et a été remplacée dans les versions suivantes de la spécification.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple (Oui)-webkit (Oui)-moz[1] Pas de support (Oui)-webkit 1.1-khtml
3.0-webkit
Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple ? ? (Oui) -moz[1] Pas de support ? 1.0-webkit

[1] En plus de la version préfixée, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, teoli, FredB, Kyodev, Fredchat
 Dernière mise à jour par : SphinxKnight,