13

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;
    align-items: flex-start;

    display: -webkit-flex;
    -webkit-flex-flow: column wrap;
    -webkit-justify-content: flex-start;
    -webkit-align-items: flex-start;

    display: -ms-flexbox;
    -ms-flex-flow: column wrap;
    -ms-justify-content: flex-start;
    -ms-align-items: flex-start;
}

To my knowledge, ie10 supports flexbox but only with the '-ms-' prefix, which I've put here. After checking the console in ie10, it is seeing the "display: -ms-flexbox;" but none of the other "-ms-" pre-fixed things?? Can anyone clarify why this is happening?

Thanks! :-)

fernandopasik
  • 9,565
  • 7
  • 48
  • 55
shan
  • 3,035
  • 5
  • 34
  • 50
  • No idea about the old `display: flexbox` syntax - I'm not sure if those properties even apply. – BoltClock Sep 10 '13 at 05:29
  • Thanks for the response BoltClock! Could you elaborate on this? Do you mean that the properties such as "-ms-flex-flow" don't work in ie10? It's really awkward trying to code for this as ie11 has support for the newest version of flexbox syntax but not for ie10 – shan Sep 10 '13 at 06:12
  • Hmm I had already read that page Teemu and when I copy paste exactly what they have listed ie10 is not detecting it??? it only detects "-ms-flexbox" as being a property of .uberflex class, nothing else :( My ie10 version is 10.0.9200.16660 – shan Sep 10 '13 at 06:14
  • Hmm... looks like it was an old doc, have you seen [this one](http://msdn.microsoft.com/en-us/library/hh772069%28v=vs.85%29.aspx)? – Teemu Sep 10 '13 at 06:18
  • Yeah I tried using those, I just add "-ms-" in front for ie10 right? I wrote "-ms-align-items: flex-start;" and it won't detect that it's there on ie10. I'm using Windows 7 (in parallels, using a Mac) btw if that makes a difference. – shan Sep 10 '13 at 06:25
  • Upvote for nightmare in the title. – atw Oct 17 '17 at 08:22

1 Answers1

63

yeah, flexbox for IE 10 is a total nightmare.

here are some tips regarding IE 10 flexbox support scraped from several sites (this one was very helpful):

first of all - a very useful flag (can be placed on all elements):

  • flag for isolating IE10-specific CSS

    .lt-ie11 & { }

the following definitions should be placed in the container element

  • Define a Flex container

    display: -ms-flexbox;

.

  • Horizontal alignment:

    -ms-flex-pack: start/end/center/justify;

.

  • Vertical Alignment

    -ms-flex-align: start/end/center/stretch/basline;

the following definitions should be placed in the child element (the "item")

  • Element Ordering

    the order number can be positive or negative. the lower the number the closer to the container start the element will appear

    -ms-flex-order [number]

.

  • Setting an item's grow/shrink/preferred size

    this is an important concept of flexbox, controlling how extra or negative (missing) space is divided between the child elements of a flexbox container.

    Basically the higher the number, the more extra space is added to the preferred size (in the case of grow), or the more space is subtracted from the element to make it fit (in case of shrink). If a value of '0' is assigned, the element's size will not be affected.

    -ms-flex: [grow shrink size];

    or, the shorhand version:

    -ms-flex: [value]; // == -ms-flex: value value 0

    notice that unless defined explicitly, IE10 gives a default preferred size of 0, which may cause your element to completely disappear. This can be mitigated by defining an explicit size (either in px or %), or defining it as auto)


For a general discussion of Flexbox, you can take a look here, and a quick lookup is here

sangil
  • 1,310
  • 2
  • 18
  • 25