Share via


Flexible box ("Flexbox") layout updates

With Microsoft Edge, you can update your sites to match the latest Flexbox standard and simplify cross-browser code.

When released in August 2012, Internet Explorer 10 introduced support for the W3C CSS Flexible Box ("Flexbox") Layout module. Because the specification was still in flux, flexbox support was provided through vendor prefixes.

In September 2012, the CSS Flexible Box ("Flexbox") Layout module was published as a W3C Candidate Recommendation, incorporating some changes in certain aspects of the specification. IE11 updates flexbox support with these changes, which include renamed properties, renamed property values, and more. Moving forward, use the new, unprefixed names (and values) and update existing sites accordingly.

The following properties have changed:

Instead of Use
The -ms-flex-wrap property The flex-wrap property
The -ms-flex-order and flex-order properties The order property.
The -ms-flex-pack property The justify-content property
The -ms-flex-align property The align-items property
The -ms-flex-item-align property The align-self property
The -ms-flex-line-pack property The align-content property

 

In addition, values supported by certain properties have changed:

Property Old value New value
display "-ms-flexbox" "flex"
display "-ms-inline-flexbox" "inline-flex"
flex-wrap "none" "nowrap"
align-content, align-items, align-self, and justify-content "start" "flex-start"
align-content, align-items, align-self, and justify-content "end" "flex-end"

 

Finally, the following additions have been made:

  • The flex property has been added as a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.

  • The align-content and justify-content properties now support "space-around" and "space-between" values.

  • The default flex behavior of flex items has changed. In Internet Explorer 10, flex items that didn't fit their containers overflowed the margins of the container or clipped to the margins of the container. Starting with IE11, these items now shrink to fit their containers (up to the min-width value, if specified). Use the flex-shrink property to change this behavior.

For site compatibility purposes, Internet Explorer for Windows Phone 8.1 Update and Microsoft Edge also support the "-webkit-" prefixed versions in addition to the latest standard equivalent of all Flexible Box ("Flexbox") Layout properties, including:

Deprecated WebKit supported alias and values Latest standard equivalent
display: -webkit-box | -webkit-inline-box display: flex
-webkit-box-align: start | center | end | stretch | baseline align-items
-webkit-box-direction: normal | reverse | inherit flex-direction
-webkit-box-flex: <number> flex
-webkit-box-ordinal-group: <number> order
-webkit-box-orient: horizontal | vertical | inline-axis | block-axis | inherit flex-direction
-webkit-box-pack: start | center | end | justify justify-content