前端之Flex布局

1 实现结果

技术点：flex布局，属性选择器。

2 实现过程

2.1 HTML代码
ul>li>a>span

<ul class="local-nav">
	<li>
		<a href="#" title="景点·旅游" >
	       <span class="local-nav-icon-n1"></span>
	       <span>景点·旅游</span>
		</a>
	</li>
	<li>
		<a href="#" title="景点·旅游" >
			<span class="local-nav-icon-n2"></span>
			<span>景点·旅游</span>
		</a>
	</li>
	<li>
		<a href="#" title="景点·旅游" >
			<span class="local-nav-icon-n3"></span>
			<span>景点·旅游</span>
		</a>
	</li>
	<li>
		<a href="#" title="景点·旅游" >
			<span class="local-nav-icon-n4"></span>
			<span>景点·旅游</span>
		</a>
	</li>
	<li>
		<a href="#" title="景点·旅游" >
			<span class="local-nav-icon-n5"></span>
			<span>景点·旅游</span>
		</a>
	</li>					
</ul>

2.2 CSS代码
先将ul设置为flex布局，然后设置li均分ul（flex：1）；
其次为a设置flex布局，设置span以列为主轴，侧轴居中对齐，
设置第一个span，即图片的宽高，这里使用了精灵图。
使用属性选择器设置每张图片。

.local-nav{
	margin: 44px 5px;
	height: 64px;
	background-color: #FFFFFF;
	border-radius: 10px;
	display: flex;	
}
.local-nav li{
	flex: 1;	
}
.local-nav a{
	display: flex;
	/*主轴方向为垂直方向*/
	flex-direction: column;
	/*侧轴居中对齐*/
	align-items: center;	
}
[class^= local-nav-icon]{
	/*1.如果要对一个span设置大小,就必须将其设置为块级元素*/
	/*2.如果要对span设置大小,也可以将其父结点设置display属性*/	
	width: 32px;
	height: 32px;
	background: url(../img/localnav_bg.png) no-repeat 0 0;
	background-size: 32px auto;
	margin-top: 8px;
	margin-bottom: 4px;
	/*margin和display结合使用*/
	/*position和left top结合使用*/
	/*float 与 padding结合使用*/	
}
.local-nav-icon-n2{
	background-position: 0px -32px;
}
.local-nav-icon-n3{
	background-position: 0px -64px;
}
.local-nav-icon-n4{
	background-position: 0px -96px;
}
.local-nav-icon-n5{
	background-position: 0px -128px;
}