IE10 Flexbox: Using Vendor Prefixes for Legacy Browser Support

Use IE10 Flexbox with Vendor Prefixes

To get a flex layout in Internet Explorer 10 you must use the -ms- prefixed properties; the unprefixed display:flex and justify-content are ignored.

Worked example: a three‑item navigation bar

The following CSS creates a container that distributes space evenly between items in IE10 and modern browsers.

.nav {
  /* IE10 */
  display: -ms-flexbox;
  /* Modern browsers */
  display: flex;
  /* IE10 main‑axis alignment */
  -ms-flex-pack: justify;
  /* Modern main‑axis alignment */
  justify-content: space-between;
  /* IE10 cross‑axis alignment */
  -ms-flex-align: center;
  /* Modern cross‑axis alignment */
  align-items: center;
}

.nav-item {
  /* IE10 flex shorthand */
  -ms-flex: 0 1 auto;
  /* Modern flex shorthand */
  flex: 0 1 auto;
}

Each .nav-item will shrink or grow as needed, and the container will center items vertically.

Property mapping table

Modern property	IE10 equivalent
display: flex	display: -ms-flexbox
justify-content	-ms-flex-pack
align-items	-ms-flex-align
flex-grow	-ms-flex-positive
flex-shrink	-ms-flex-negative
flex-basis	-ms-flex-preferred-size

Limits and common mistakes

Missing gap support

IE10 does not understand the gap property. Use margins on flex items and reset the last item’s margin to avoid extra space.

.nav-item {
  margin-right: 12px;
}
.nav-item:last-child {
  margin-right: 0;
}

Incorrect prefix usage

Frequent errors include applying only the unprefixed version or mixing prefixes inconsistently, which results in the container behaving as a block.

Align‑content and wrap quirks

When flex-wrap is combined with align-content, IE10 may place wrapped lines incorrectly because it follows the 2012 Flexbox draft. Test the layout in IE10’s F12 tools to catch unexpected vertical offsets.

Verification steps

1. Open the page in IE10 (or IE11 Enterprise mode).
2. Press F12, select the DOM Explorer, and check the computed styles of the container.
3. Confirm that display shows -ms-flexbox and that -ms-flex-pack and -ms-flex-align have the expected values.
4. Resize the window or change content size to see if items distribute space according to the -ms-flex values.

If the computed styles show the unprefixed values only, the layout will not flex.