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
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 initiale | start |
|---|---|
| Applicabilité | éléments dont CSS display vaut -moz-box, -moz-inline-box, -webkit-box ou -webkit-inline-box |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Compatibilité des navigateurs
BCD tables only load in the browser