-ms-box-pack property

Do not use. This property has been replaced by the -ms-flex-pack property, and is no longer recognized by a Windows Store app using JavaScript. To ensure compatibility in the future, applications using this property should be updated accordingly. Gets or sets a value that specifies how excess space is distributed (along the axis defined by the -ms-box-orient property) between child elements of the object.

This property is read/write.

Flexible Box Layout Module, Section 6

Syntax

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

Property values

One of the following values.

start

The starting edge of the first child element is placed at the start of the parent element; the starting edge of the next child element is placed edge to edge with the ending edge of the first child element; and so on along the layout axis direction. All space that remains along the layout axis is placed at the end of the layout axis.

end

The ending edge of the first child element is placed at the end of the parent element; the ending edge of the next child element is placed edge to edge with the starting edge of the first child element; and so on along the layout axis direction. All space remaining along the layout axis is placed at the start of the layout axis.

center

All child elements are placed edge to edge with each other, as described in the descriptions for the start or end keywords. However, the group of child elements is centered between the starting and ending edges of the parent element so that all remaining space is evenly distributed before the first child element and after the last child element.

justify

The starting edge of the first child element is placed at the start of the parent element; the ending edge of the last child element is placed edge to edge with the end of the parent box; and all remaining children are placed between the first and last child elements, so that any space that remains along the layout axis is equally distributed between child elements.

CSS information

Applies Tobox elements
Mediavisual
Inheritedno
Initial Valuestart

Standards information

Remarks

Be aware that these are writing-mode dependent keywords; the starting and ending edges of the parent element and child elements depend on the layout direction. For instance, for a left-to-right layout, the starting edge is the left edge of the parent element, for a top-to-bottom layout the starting edge is the top edge, and so on. Likewise, the ending edge of a child element is the right edge in a left-to-right layout, the bottom edge in a top-to-bottom layout, and so on.

Examples

The following ID selector has added the -ms-box-pack property and set it to justify:


<style type="text/css">
#myFlexbox
{
    display: -ms-box;
    -ms-box-pack: justify;
    background: grey;
    border: blue;
}
</style>


See also

CSSStyleDeclaration

 

 

Build date: 9/4/2012

Community Additions

Show: