IE10 Flexbox Layout Using -ms- Vendor Prefixes

Problem: Standard Flexbox Is Ignored in IE10

Internet Explorer 10 does not recognize the unprefixed Flexbox properties from the final W3C specification. Declarations such as display: flex, justify-content, and align-items are ignored, so the browser lays out children using normal block flow instead of a flex container. The useful takeaway is to declare the IE10-specific -ms- equivalents before the modern rules, then verify the result in an actual IE10 environment because this implementation follows an early draft specification.

Why the Legacy Rules Come First

CSS applies declarations in source order when specificity is equal. By placing the -ms- rules before the unprefixed modern rules, IE10 reads the legacy properties it understands and ignores the unprefixed ones it does not. Newer browsers read both sets but apply the modern unprefixed declarations because they appear later in the stylesheet. This pattern lets a single stylesheet serve both engines without conditional comments or separate files.

Worked Configuration: Centered Container

The following CSS creates a flex container that centers its child horizontally and vertically in IE10 while remaining valid for newer browsers. Place the legacy rules first so modern browsers can override them with the unprefixed versions.

.hero-container {
  /* IE10 early flexbox draft */
  display: -ms-flexbox;
  -ms-flex-pack: center;
  -ms-flex-align: center;

  /* Modern W3C Flexbox */
  display: flex;
  justify-content: center;
  align-items: center;

  height: 400px;
  background-color: #f4f4f4;
}

.hero-item {
  /* IE10 grow factor */
  -ms-flex-positive: 1;

  /* Modern flex-grow */
  flex-grow: 1;

  padding: 20px;
  text-align: center;
}

No markup changes are required. The same HTML structure works for both the legacy and modern declarations.

Property Mapping for IE10

IE10 uses vendor-prefixed names and an early draft syntax. The table below maps common modern Flexbox properties to the equivalents IE10 parses.

Modern property	IE10 equivalent	Effect
display: flex	display: -ms-flexbox	Activates the flex container
justify-content	-ms-flex-pack	Main-axis alignment
align-items	-ms-flex-align	Cross-axis alignment
flex-grow	-ms-flex-positive	Relative grow factor
flex-shrink	-ms-flex-negative	Relative shrink factor

Use the exact spelling shown. Variants such as -ms-flex-align-items are not recognized by IE10 and are silently ignored.

Limitations and Common Mistakes

• No wrapping: IE10 does not support flex-wrap. All flex items remain on a single line. If the combined width exceeds the container, content overflows or is compressed according to the grow and shrink factors.
• No gap property: gap, row-gap, and column-gap are unknown. Add spacing with margins on the flex items instead.
• Order behavior: The order property exists in the early draft, but its interaction with float-based fallbacks or layout-triggering properties is version-sensitive and not well documented for IE10. Avoid depending on complex visual reordering in this browser.
• Incorrect prefixes: Writing -ms-flex-align-items or -ms-justify-content produces no effect because those names do not exist in the IE10 implementation.

Verification Steps

1. Open the page in IE10. Use a virtual machine or compatible testing environment; modern browser developer tools cannot emulate the IE10 flex engine.
2. Inspect computed styles. Press F12 to open Developer Tools, select the container element, and open the Computed tab. Confirm that display resolves to -ms-flexbox. If it shows block, the prefix is missing or misspelled.
3. Test main-axis alignment. Temporarily change -ms-flex-pack to flex-start or flex-end. The items should shift to the corresponding edge of the container.
4. Confirm single-line behavior. Add more child elements than fit horizontally. In IE10 they should stay on one line and either overflow the container boundary or shrink, not wrap to a new row.

Because adding CSS rules does not alter document or server state, there is no rollback procedure. To remove IE10 support, delete the -ms- declarations from the stylesheet; browsers that do not recognize the prefix ignore them, and the modern display: flex rules continue to apply.

Note: The IE10 Flexbox implementation is based on an early draft and cannot be verified against live documentation at the time of writing. Treat behavior details as version-sensitive and confirm them in an IE10 environment before relying on them in production.