Flexible box ("Flexbox") layout in Internet Explorer 10

Note  This content applies to CSS Flexible Box on Internet Explorer 10. For a more current overview of Flexbox, see Flexible Box Layout.

Caution  Internet Explorer 11 no longer supports the Microsoft vendor prefix ("-ms-") version of the flexbox properties. You should instead use the non-prefixed names, which is preferred for better standards compliance and future compatibility. See Flexible box ("Flexbox") layout updates for a summary of changes and best practices.

Internet Explorer 10 and Windows Store apps using JavaScript in Windows 8 introduce support for the CSS Flexible Box Layout Module ("Flexbox"). The flexbox module is, as of this writing, a World Wide Web Consortium (W3C) Working Draft. (The implementation of flexbox in Internet Explorer 10 is based on the March 22, 2012 version of the Flexbox Working Draft.) Flexbox adds to the four basic layout modes defined in Cascading Style Sheets, Level 2 Revision 1 (CSS2.1) (and enabled via the display property): block layout, inline layout, table layout, and positioned layout. Flexbox layout is intended for laying out more complex webpages. It's especially useful for making the relative position and size of elements stay constant, even as screen and browser window sizes vary and change. Flexbox can lessen the reliance on floats, which are more complicated to position and size correctly.

Flexbox layout takes the available space into account when defining box dimensions, which enables relative sizes and positioning. For example, you can ensure that extra whitespace in a browser window is equally distributed to the size of multiple child elements, and that those child elements are centered in the middle of the containing block.

With flexbox layout, you can:

  • Build a layout that is fluid—even by using different screen and browser window sizes—but contains elements (such as images or controls) that maintain their position and size relative to each other.
  • Specify how excess space along the layout axis (horizontal or vertical) of a series of elements can be proportionately allocated to increase the size of given elements.
  • Specify how excess space along the layout axis of a series of elements can be allocated to fall before, after, or between the series of elements.
  • Specify how excess space perpendicular to the layout axis of an element can be shaped around the element—for instance, extra space above or below buttons that have been laid out side by side.
  • Control the direction that elements are laid out on the page—for instance, top-to-bottom, left-to-right, right-to-left, or bottom-to-top.
  • Reorder elements on the screen in an order that is different from how they are specified by the Document Object Model (DOM).

The flexbox container

To enable flexbox layout, you must first create a flexbox container. Do this by setting the display property of an element to either "-ms-flexbox" (for a block-level flexbox container) or "-ms-inline-flexbox" (for an inline flexbox container). (Because of the preliminary status of the CSS Flexible Box Layout Module draft, this value and all the properties in this section must be used with the Microsoft-specific vendor prefix, "-ms-", to work with Internet Explorer 10 and Windows Store apps using JavaScript in Windows 8.) For instance, the following code example creates a block-level flexbox container within the element that has an ID of "myFlexbox":


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


Setting flexbox orientation

When creating a flexbox container, you can also set its orientation—that is, specify whether its children are displayed from right-to-left, left-to-right, top-to-bottom, or bottom-to-top. The following property does this:

PropertyDescription

-ms-flex-direction

Specifies the orientation in the layout of all child elements of the object.

The possible values for this property are the following keywords:

row

This is the initial value. Child elements are displayed in the same order that they are declared in the source document, from left to right.

Example of -ms-box-orient:horizontal
column

Child elements are displayed in the same order that they are declared in the source document, from top to bottom.

Example of -ms-box-orient:vertical
row-reverse

Child elements are displayed in the reverse order that they are declared in the source document, from right to left.

Example of -ms-box-direction:normal
column-reverse

Child elements are displayed in the reverse order that they are declared in the source document, from bottom to top.

inherit

Child elements are displayed in the same order as the computed value of this property for the parent element.

 

For instance, the following ID selector has added the -ms-flex-direction property and set it to row:


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


Setting flexbox alignment

When creating a flexbox container, you can also set its alignment—that is, specify in what direction its children should be displayed, but perpendicular to the layout axis defined by the -ms-flex-direction property.

PropertyDescription

-ms-flex-align

Specifies the alignment (perpendicular to the layout axis defined by the -ms-flex-direction property) of child elements of the object.

The possible values for this property are the following keywords. Be aware that these are writing-mode dependent keywords; both the leading edge of the parent element and child elements and the trailing edge of the child elements depend on the layout direction. For instance, for a left-to-right layout, the leading edge is the top edge of the parent element; for a top-to-bottom layout, the leading edge is the left edge of the parent element, and so on. Likewise, for a left-to-right layout, the trailing edge of child elements is the bottom edge; for a top-to-bottom layout, the trailing edge of child elements is the right edge, and so on.

start

If the parent element has a computed value for -ms-flex-direction of row or column, the leading edge (or baseline) of each child element is aligned with the leading edge of the object. Any remaining space, perpendicular to the layout axis, is placed after the trailing edge of each child element.

If the parent element has a computed value for -ms-flex-direction of row-reverse or column-reverse, the trailing edge (or baseline) of each child element is aligned with the trailing edge of the object. Any remaining space, perpendicular to the layout axis, is placed before the leading edge of each child element.

Example of -ms-box-align:before
end

If the parent element has a computed value for -ms-flex-direction of row or column, the trailing edge of each child element is aligned with the trailing edge of the object. Any remaining space, perpendicular to the layout axis, is placed before the leading edge of each child element.

If the parent element has a computed value for -ms-flex-direction of row-reverse or column-reverse, the leading edge of each child element is aligned with the leading edge of the object. Any remaining space, perpendicular to the layout axis, is placed after the trailing edge of each child element.

Example of -ms-box-align:after
center

Each child element is centered between the leading and trailing edges of the object. Any remaining space, perpendicular to the layout axis, is evenly distributed before and after each child.

Example of -ms-box-align:middle
stretch

This is the inital value. Each child element is stretched to completely fill the space that is available perpendicular to the layout axis. If set, the max-width or max-height property for a child element takes precedence and layout follows the start rule.

Example of -ms-box-align:stretch
baseline

The baselines (leading edge or trailing edge depending on the -ms-flex-direction property) of all child elements are aligned with each other.

The child element that occupies the most space, perpendicular to the layout axis, follows the start rule; the baselines of all remaining elements are then aligned with the baseline of this element.

Example of -ms-box-align:baseline

 

For instance, the following ID selector has added the -ms-flex-align property and set it to start:


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


Distributing whitespace among flexbox child elements

You can specify whitespace distribution among flexbox child elements by using the following property:

PropertyDescription

-ms-flex-pack

Specifies how excess space is distributed (along the axis defined by the -ms-flex-direction property) between child elements of the object.

The possible values for this property are the following keywords. 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.

start

This is the initial value. 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.

Example of -ms-box-pack:start
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.

Example of -ms-box-pack:end
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.

Example of -ms-box-pack:center
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.

Example of -ms-box-pack:justify

 

For instance, the following ID selector has added the -ms-flex-pack property and set it to justify:


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


Enabling child element wrap

You can enable overflowing flexbox child elements to wrap to the next line and control the flow direction by using the following property:

PropertyDescription

-ms-flex-wrap

Specifies whether child elements wrap onto multiple lines or columns based on the space available in the object.

The possible values for this property are the following keywords:

none

This is the initial value. All child elements are displayed in a single row or column. The overflow property of the object determines whether the child elements are hidden, clipped, or scrollable.

wrap

Child elements are wrapped and displayed in successive, parallel rows or columns. The object expands in height or width, perpendicular to the axis defined by the writing-mode property, to accommodate the additional rows or columns.

Example of -ms-box-line-progression:normal
wrap-reverse

Child elements are wrapped and displayed in successive, parallel rows or columns in reverse order. The object expands in height or width, perpendicular to the axis defined by the writing-mode property, to accommodate the additional rows or columns.

Example of -ms-box-line-progression:reverse

 

Be aware that Internet Explorer 10 attempts to fit the child elements of a parent box into as few lines as possible by shrinking all boxes to their minimum size. A single element that does not fit on its line is clipped at the end of the line.

By default, additional lines are added to retain the block direction. In both left-to-right and right-to-left layouts, new lines are added below the existing lines (unless a top-to-bottom block direction has been explicitly defined elsewhere). Likewise, whether new lines appear to the right or left of vertical layout depends on the block direction, which might be left-to-right or right-to-left, depending on writing direction or other specific settings.

For instance, the following ID selector has added the -ms-flex-wrap property and set it to wrap:


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


Adding flexbox child elements

Now that you have created a flexbox container, you can add child elements to it. To add a child element to the flexbox container, make the element an immediate child of the flexbox element, as shown in the following markup:


<style type="text/css">
#myFlexbox {
  background: gray;
  border: blue;
  display: -ms-flexbox;
}
#child1 {
  background: maroon; 
  border: orange solid 1px;
}
#child2 {
  background: lightgray;
  border: red solid 1px;
}
</style>
<body>
<div id="myFlexbox">
  <div id="child1">child 1</div>
  <div id="child2">child 2</div>
</div>
...
</body>


Setting the flexibility of a child element

You can control how excess space along a parent box's layout axis is proportionately distributed to child elements. By using the -ms-flex property, you can make flexbox items "flex," altering their width or height to fill the available space. A flexbox distributes free space to its items proportional to their positive flexibility, or shrinks them to prevent overflow proportional to their negative flexibility.

When the element containing the -ms-flex property is a flexbox item, the -ms-flex property is consulted instead of the width or height properties to determine the main size of the element. (If an element is not a flexbox item, the -ms-flex property has no effect.)

PropertyDescription

-ms-flex

Specifies whether the width or height of a child element is flexible based on the space available in the object. This value also indicates the proportion of space available that is allocated to the child element. Its syntax is as follows:


-ms-flex: <positive-flex> <negative-flex> <preferred-size>

This property can be set to any of the following values, or to none.

<positive-flex>

An integer that sets the positive flexibility. If omitted, the element's positive flexibility is "1". A negative value is not valid.

<negative-flex>

An integer that sets the negative flexibility. If omitted, the element's negative flexibility is "0". A negative value is not valid.

<preferred-size>

Sets the preferred size of the flexbox item. Can be any valid value for the width or height properties, excluding inherit. If omitted, the preferred size is "0px". If the <preferred-size> component is auto on a child of a flexbox, the preferred size is the value of the flexbox item's width or height property (whichever is parallel to the main axis).

none

This is the initial value. Equivalent to setting -ms-flex to "0 0 auto".

 

Grouping flexbox child elements

You can group flexbox child elements by using a group number to control the order in which each element is rendered along the layout axis, even if that order is different from the DOM order. To set the grouping, use the following property:

PropertyDescription

-ms-flex-order

Specifies the ordinal group that a flexbox element belongs to. This integer identifies the display order (along the axis defined by the -ms-flex-direction property) for the group.

Values must be integers greater than zero. The initial value for this property is "0".

 

The -ms-flex-order property enables you to place elements in ordinal groups, starting with ordinal group 0. All child elements in each ordinal group are rendered along the specified layout axis before any of the child elements in the next ordinal group are rendered. Therefore, all the child elements in ordinal group 0 are rendered before any of the child elements in ordinal group 1, and so on. Elements within ordinal groups are rendered in DOM order. By default, additional lines are added in keeping with the block direction.

For instance, the following markup defines four child elements and assigns most of them an ordinal value using the -ms-flex-order property:


<style type="text/css">
#myFlexbox {
  display: -ms-flexbox;
  color: white;
  font-size: 48px;
  font-family: "Segoe UI", "Lucida Grande", Verdana, Arial, sans-serif;
  text-align: left;
  height: 200px;
  border: none;
}
#child1 {
  -ms-flex-order: 1;
  background: #43e000;  
  padding: 20px;
}
#child2 {
  -ms-flex-order: 0;
  background: #166aff;
  padding: 20px;
}
#child3 {
  -ms-flex-order: 1;
  background: #43e000;
  padding: 20px;
}
#child4 {
  background: #166aff;
  padding: 20px;
}
</style>
</head>
<body>
<div id="myFlexbox">
  <div id="child1">1</div>
  <div id="child2">2</div>
  <div id="child3">3</div>
  <div id="child4">4</div>
</div>
</body>


Both child2 and child4 are in ordinal group 0, and child1 and child3 are in ordinal group 1. Because within each ordinal group, child elements are rendered according to DOM order, these elements appear in the following order in the parent flexbox element: child2, child4, child1, child3. You can see this in the following screen shot:

Screenshot of the preceding sample in a browser window

You can view this page. (Internet Explorer 10 is required to view this page correctly.)

Related topics

Flexible Box Layout

 

 

Show:
© 2014 Microsoft