1. Home
  2. CSS3 box-pack property

The best CSS3 box-pack property Tutorial In 2024, In this tutorial you can learn Examples,Browser Support,Attribute definitions and instructions,grammar,

CSS3 box-pack property

Examples

The child element of the div using both box-align and box-pack centered properties:

div
{
width:350px;
height:100px;
border:1px solid black;

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}

Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

The current mainstream browsers do not support box-pack attribute.

Internet Explorer 10 using the -ms-flex-pack property property instead support.

Firefox by private property - MOZ-box-pack support.

Safari, Opera, and Chrome through private property -webkit-box-pack support.

Note: Internet Explorer 9 and earlier versions of IE do not support flexible box.

Attribute definitions and instructions

box-pack box attribute specifies when a child element is placed in the box of the child element is smaller than the box.

This attribute specifies the cross frame horizontal position, vertical position of the vertical frame.

Defaults: start
inherit: no
version: CSS3
JavaScript syntax: object .style.boxPack = "center"

grammar

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

value Explanation
start For the general direction of the boxes, the first child is placed in the left edge of the left side (the last child element of all the extra space after standing). For the reverse boxes, the right edge of the last child element is placed on the right side (all the extra space is placed before the first child element of)
end For normal direction boxes, the last child element of the right edge placed to the right (all first child extra space before). For the reverse boxes, the first child of the left edge on the left side (the last child element of all the extra space after)
center The extra space is divided evenly into two halves, the first half is placed first child, place the other half of the last child element
justify The average additional space allocated to each sub-element

Hot Tools

Other Tools

Online Tutorial

Website Navigation

CSS3 box-pack property
10/30