CSS3 `box-pack` Property

Example

Using both box-align and box-pack center properties on child elements within a div:

Currently, none of the major browsers support the box-pack property.

Internet Explorer 10 supports the -ms-flex-pack property as an alternative.

Firefox supports the private -moz-box-pack property.

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

Note: Internet Explorer 9 and earlier versions do not support the flexbox.

The box-pack property specifies how a box's children are positioned when the child elements are smaller than the box.

This property specifies the horizontal position for horizontal boxes and the vertical position for vertical boxes.

Value	Description
start	For normal direction boxes, the left edge of the first child is placed on the left (all extra space is placed after the last child). For reverse direction boxes, the right edge of the last child is placed on the right (all extra space is placed before the first child).
end	For normal direction boxes, the right edge of the last child is placed on the right (all extra space is placed before the first child). For reverse direction boxes, the left edge of the first child is placed on the left (all extra space is placed after the last child).
center	The extra space is divided equally into two halves, with the first half placed before the first child and the second half placed after the last child.
justify	The extra space is evenly distributed among each child.