Flexbox in IE10

css internet-explorer-10 flexbox
user3071261 picture user3071261 · Apr 12, 2014 · Viewed 13.5k times · Source

I'm trying to get flex box working in IE10 but it's not working. Safari, Chrome and Firefox are working fine, but IE10 doesn't wanna work. Anyone knows the answer?

codepen: http://codepen.io/anon/pen/vcEGH/

  display: -moz-box;              /* OLD - Firefox 19- (doesn't work very well) */
  display: -ms-flexbox;           /* TWEENER - IE 10 */
  display: -webkit-flex;          /* NEW - Chrome */
  display: flex;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */

  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;

  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;

  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;

Answer

G-Cyrillus picture G-Cyrillus · Apr 12, 2014

For IE10 , span should be displayed as inline-block to trigger layout somehow .

Test here if it fixes it : http://codepen.io/gc-nomade/pen/lhsEt

Related questions

Why does display: -ms-flex; -ms-justify-content: center; not work in IE10?

Why doesn't the following code work in IE10? .foo { display: -ms-flex; -ms-justify-content: center; } What do I need to write in order for them to work?

Read More
Flex auto margin not working in IE10/11

I have a complex layout where I center various elements vertically and horizontally with flexbox. The last element then has margin-right:auto; applied to push the elements left (and negate centering them). This works correctly everywhere except on IE10/11 and …

Read More
ie10 and flexboxes? (nightmare)

Unfortunately, I have to make my website code compatible with Internet Explorer 10 and am having some issues, even after reading the documentation on their official website here is my css code: .uberflex { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; …

Read More