Using CSS3 Flexbox in Internet Explorer 10 with the -ms- Prefix

Problem: Float‑based layouts in IE10

Traditional float‑based grids work in IE10 but become fragile when you need responsive behavior. Adding clearfixes, adjusting widths, and handling wrapping often leads to verbose, hard‑to‑maintain CSS.

Enabling Flexbox with the -ms- prefix

IE10 implements a preview of the Flexbox spec, but all properties require the -ms- vendor prefix. To create a flex container you set display:-ms-flexbox; and control direction, alignment, and distribution with properties like -ms-flex-direction, -ms-flex-pack, and -ms-flex-align.

Worked example: Three‑card component

The following HTML defines a simple card wrapper. The CSS uses the prefixed Flexbox properties to stack cards vertically on narrow screens and lay them out side‑by‑side on viewports wider than 600 px.

<!-- HTML -->
<div class="cards">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

/* CSS */
.cards {
  display: -ms-flexbox;
  -ms-flex-direction: column; /* vertical stack */
}
@media (min-width: 600px) {
  .cards {
    -ms-flex-direction: row;   /* horizontal row */
    -ms-flex-pack: justify;    /* space between */
  }
}
.card {
  background: #f0f0f0;
  margin: 0.5rem;
  padding: 1rem;
}

Trade‑offs and limitations

• The -ms- prefix adds verbosity; you must duplicate standard Flexbox rules for other browsers.
• IE10’s implementation lacks flex-wrap, the gap property, and shorthand properties like flex-grow and flex-shrink.
• For IE9 and earlier you still need a fallback (e.g., float‑based layout) because those versions do not recognize any Flexbox syntax.

Actionable steps

1. Begin with a mobile‑first stylesheet that uses either floats or the standard Flexbox syntax (which will be ignored by IE10).
2. Add an IE10‑specific block inside a media query that targets IE10’s high‑contrast media feature:

   @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10‑only Flexbox rules go here */
   }
   

3. Test the page in Internet Explorer 10 (or use IE11 → F12 → Emulation → Document mode set to 10). Open the computed styles pane for the .cards element and verify that display:-ms-flexbox; appears.
4. Resize the browser window past the 600 px breakpoint and observe the layout shift from vertical stacking to a justified horizontal row.
5. Confirm graceful degradation by disabling the Flexbox block or viewing the page in IE9; the fallback float‑based layout should still present readable content.