bloqhead
4/8/2015 - 6:37 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
// Apply this to your <ul> or <ol>
@mixin flexmenu {
	width: 100%;
	text-align: center;
	@include box-sizing(border-box);
	@include display(flex);
	@include align-items(stretch);

	> li {
		@include flex(1);
	}

	// Flexbox fallback
	html.no-flexbox & {
		display: table;

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