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 |