bloqhead
4/22/2015 - 3:11 PM

Mixin for making nice horizontal menus with flexbox. What's that? You want browser support for the shitty versions of IE that don't support

Mixin for making nice horizontal menus with flexbox. What's that? You want browser support for the shitty versions of IE that don't support flexbox? Include Modernizr on your project and this mixin will cover you. Also, this leverages Bourbon (http://bourbon.io).

//
// Flexbox menus w/ IE fallback
//
// Apply this to your <ul> or <ol>
// Requires both Bourbon and Modernizr!
//

@mixin flexmenu {
	width: 100%;
	text-align: center;
	@include box-sizing(border-box);
	@include display(flex);
	@include align-items(stretch);
	@include align-content(stretch);
	@include justify-content(center);
	@include flex-flow(row wrap);

	> li {
		@include flex(1);
		@include align-self(stretch);
	}

	// Fallback for shitty IE
	html.no-flexbox & {
		display: table;

		> li {
			display: table-cell;
		}
	}
}
ul.menu {
  @include flexmenu;
}