Using IE10’s Draft Flexbox for Legacy Horizontal Layouts

Quick solution for IE10 flexbox

To get a working horizontal layout in Internet Explorer 10 you must use the vendor‑prefixed draft flexbox syntax. The container needs display:-ms-flexbox and alignment is controlled with -ms-flex-pack (main axis) and -ms-flex-align (cross axis). Modern browsers understand the unprefixed display:flex and the standard properties, so you can provide both as a fallback.

Worked example: a three‑item toolbar

/* toolbar container */
.toolbar {
  display: -ms-flexbox; /* IE10 */
  display: flex;        /* modern */
  -ms-flex-pack: start; /* IE10: justify-content:flex-start */
  justify-content: flex-start;
  -ms-flex-align: center; /* IE10: align-items:center */
  align-items: center;
  height: 40px;
}
/* toolbar items */
.item {
  -ms-flex: 0 0 auto; /* IE10: flex-grow, flex-shrink, flex-basis */
  flex: 0 0 auto;
  margin: 0 8px;
}

How the mechanism works

In IE10 the -ms-flexbox value activates the 2012 flexbox draft. The -ms-flex shorthand sets -ms-flex-grow, -ms-flex-shrink and -ms-flex-basis in that order. The container’s main axis is horizontal by default; -ms-flex-pack distributes free space along that axis, while -ms-flex-align positions items on the cross axis. Unlike the modern spec, IE10 treats the flex-basis as a fixed width unless the value is auto, so mixing an explicit width with -ms-flex can cause the width to be ignored.

Limits and common mistakes

• No line‑wrap: IE10 does not support flex-wrap. Items that exceed the container width will shrink or overflow instead of moving to a new line. For multi‑line layouts you must fall back to floats or calculate widths manually.
• Missing min-height support: A flex container’s min-height is ignored, which can collapse the container to zero height when its content is dynamic. Give the container an explicit height or use padding‑bottom as a workaround.
• Vertical alignment bugs: -ms-flex-align is unreliable if the container lacks a set height. Always define a height (or line-height) when you rely on vertical centering.

Verification and diagnostics

Open IE10 Developer Tools (F12), select the container element, and view the Computed tab. You should see:

• display: -ms-flexbox (or also display: flex if the rule cascades)
• -ms-flex-pack: start
• -ms-flex-align: center
• For each item, -ms-flex: 0 0 auto

If the computed display shows block, the prefix is missing or being overridden by a higher‑specificity rule. Adjust the CSS order or increase specificity to ensure the prefixed rule wins.