Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Josh Reynolds
Josh Reynolds
10,734 Points

Flexbox and supporting IE9

Hi There,

I'm creating a small widget for a task for a small company and it would make my life a hell of a lot easier if I could just use flexbox for creating something like this:

.ww-wrapper {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;

  @include breakpoint(md+) {
    flex-direction: row;
    justify-content: center;
  }
} 
.results {
  flex: 1 1 auto;
  margin: 5px;
}
...

All I need is a flex container with 3 items(cards) set with equal distance between that stack vertically mobile and horz on desk. This is a LOT better than floating, setting max-widths of 33% and minusing margin sizes and getting correct values so they display evenly.

However I also need to target IE9 so I have a slight problem here as it is not supported. What would be the best workaround//fallback?

nik
nik
8,925 Points

Only thing I can think of is adding a script to detect browser type then creating two type of styles to load dependent on that.