Flexbox alternative for IE9

by

Use modernizr to detect whether flex capabilities are present, and provide fallback styles where necessary. Modernizr will add classes like flexbox, no-flexbox, and flexbox-legacy to the html element, so in your styles you can use:

    .container {
        display: flex;
    }
    .no-flexbox .container {
        display: table-cell;
    }

I highly recommend reading through Zoe Gillenwater’s (@zomigi) presentations on the subject, particularly Leveling Up With Flexbox (Smart Web Conference – September 2014)

  • slide 21: horizontal navigation spacing > display: inline-block;
  • slide 62: pinning elements without flexbox > display: table-cell;
  • slide 70,71: aligning forms fallbacks
  • slide 88,91: example with and without flex order

Also, in her presentation CSS3 Layout, there are a few good sideby side previews of layouts with and without flexbox:

  • slide 73: Using inline-block with flexbox: horizontal form
  • slide 79: Using inline-block with flexbox: horizontal navigation

Some of takeaways for me:

  • browser support ie10+ is pretty good caniuse
  • use auto-prefixr to handle browser prefixes
  • use modernizr to provide fallbacks
  • “flexbox is not all or nothing” @zomigi

More Related Contents:

  1. css ‘pointer-events’ property alternative for IE
  2. flex container min-height ignored in IE
  3. Flexbox and Internet Explorer 11 (display:flex in ?)
  4. Flexbox column-reverse in Firefox, Edge and IE
  5. Why does my design elements look different in all browsers? UPDATE [closed]
  6. Make container shrink-to-fit child elements as they wrap
  7. When flexbox items wrap in column mode, container does not grow its width
  8. One flex/grid item sets the size limit for siblings
  9. Why are flex items not wrapping?
  10. Browsers’ default CSS for HTML elements
  11. Align an element to bottom with flexbox
  12. Make background color extend into overflow area
  13. Center text over an image in flexbox
  14. Force flex item to span full row width
  15. Why can’t be flex containers?
  16. Prevent flex items from rendering side to side
  17. ‘position: sticky’ not working when ‘height’ is defined
  18. Text not centered with justify-content: center
  19. Setting a width and height on an A tag
  20. How to stretch flex child to fill height of the container?
  21. Flexbox resize and scrollable overflow [duplicate]
  22. CSS object-fit: contain; is keeping original image width in layout
  23. Blank iFrame in IE
  24. Flexbox on IE11: image stretched for no reason?
  25. Will targeting IE8 with conditional comments work?
  26. extra space when centering elements using flexbox
  27. Height is not correct in flexbox items in Chrome [duplicate]
  28. How to make a flex item not fill the height of the flex container? [duplicate]
  29. Alignment of content vertically in adjacent flexbox containers
  30. Flex elements ignore percent padding in Firefox

Leave a Comment