scss Mixin用于使用flexbox制作漂亮的水平菜单。那是什么？您希望浏览器支持不支持的糟糕IE版本

Posted 2021-05-18

//
// 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;
}