box-pack
Non standard: Cette fonctionnalité n'est pas standardisée. Nous déconseillons d'utiliser des fonctionnalités non standard en production, car leur prise en charge par les navigateurs est limitée, et elles peuvent être modifiées ou supprimées. Toutefois, elles peuvent constituer une alternative appropriée dans certains cas où aucune option standard n'existe.
Obsolète: Cette fonctionnalité n'est plus recommandée. Même si certains navigateurs la prennent encore en charge, elle a peut-être déjà été supprimée des standards du web, est en passe d'être supprimée ou n'est conservée qu'à des fins de compatibilité. Évitez de l'utiliser et mettez à jour le code existant si possible ; consultez le tableau de compatibilité au bas de cette page pour vous aider à prendre votre décision. Sachez que cette fonctionnalité peut cesser de fonctionner à tout moment.
Attention : Cette propriété fait partie de la première version du standard pour les boîtes flexibles (flexbox en anglais) 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.
La direction de la disposition dépend de l'orientation de l'élément : horizontale ou verticale.
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;
La propriété box-pack est définie avec l'une des valeurs de mot-clé listées ci-dessous.
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.
Notes
Le bord de la boîte désigné comme début pour le regroupement dépend de l'orientation et de la direction de la boîte :
- Pour les éléments horizontaux, le début est le bord supérieur.
- Pour les éléments verticaux, le début est le bord gauche.
| Normal | Inverse | |
|---|---|---|
| Horizontal | gauche | droit |
| Vertical | hau | bas |
Le bord opposé au début est désigné comme la fin.
Si le regroupement utilise l'attribut pack de l'élément, le style est ignoré.
Définition formelle
| 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 |
Syntaxe formelle
box-pack =
start |
center |
end |
justify
Exemples
Exemples avec box-pack
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;
}
<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>
Spécifications
Ne fait partie d'aucun standard.
Compatibilité des navigateurs
Voir aussi
- La propriété
box-orient - La propriété
box-direction - La propriété
box-align