css - ie10 and flexboxes? (nightmare)

Question

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! :-)

Answer 1

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