-ms-flex-pack property (Internet Explorer)

The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

This topic has not yet been rated - Rate this topic

Gets or sets a value that specifies how excess space is distributed (along the axis defined by the -ms-flex-direction property) between child elements of the object.

This property is read/write.

Syntax

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

Property values

One of the following values.

start: Initial value. Flexbox items are packed toward the start of the line. 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: Flexbox items are packed toward the end of the line. 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: Flexbox items are packed toward the center of the line. 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: Flexbox items are evenly distributed in the line. 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 To	flexbox elements
Media	visual
Inherited	no
Initial Value	start

Standards information

Flexible Box Layout Module, Section 8.1

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-flex-pack property and set it to justify:

HTML


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

-ms-flex-pack property