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 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 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:

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.

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:

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:

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.)

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

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:

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:

• child1 has a -ms-flex-order value of "1"
• child2 has a -ms-flex-order value of "0", the initial value
• child3 has a -ms-flex-order value of "0"
• child4 has no -ms-flex-order property, which means it is given the initial -ms-flex-order value of "0"

<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:

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

Related topics

Flexible Box Layout