box-pack

Non standard

Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

Attention ! 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.

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.
/*  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;

Voir la page Flexbox pour plus d'informations.

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

Syntaxe

Cette propri√©t√© se d√©finit gr√Ęce √† l'un des mots-cl√©s d√©finis ci-apr√®s.

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.

Valeur initialestart
Applicabilitééléments dont CSS display vaut -moz-box, -moz-inline-box, -webkit-box ou -webkit-inline-box
Héritéenon
Valeur calculéecomme spécifié
Type d'animationdiscrète

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi