Flexible box ("Flexbox") layout updates

With Internet Explorer 11, 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 ofUse
The -ms-flex-wrap propertyThe flex-wrap property
The -ms-flex-order and flex-order propertiesThe order property.
The -ms-flex-pack propertyThe justify-content property
The -ms-flex-align propertyThe align-items property
The -ms-flex-item-align propertyThe align-self property
The -ms-flex-line-pack propertyThe align-content property

 

In addition, values supported by certain properties have changed:

PropertyOld valueNew 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.

 

 

Show:
© 2014 Microsoft