CSS中display:block和display:flax使用记录

CSS中display:block和display:flax使用记录

代码：
（css）

.navigation ul li a{
	position:relative;
	width: 100%;
	text-decoration: none;
	color: #FFFFFF;
	display: flex;
}

.navigation ul li a .icon{
	position:relative;
	display: block;
	width: 60px;
	height: 60px;
	color: #FFFFFF;
	line-height: 70px;
	text-align: center;
}

.navigation ul li a .title{
	position:relative;
	display: block;
	width: 60px;
	height: 60px;
	color: #FFFFFF;
	line-height: 60px;
	text-align: center;
}

(HTML)

<ul>
	<li>
		<a href="#">
			<span class="icon"><i class="fa fa-home fa-2x" aria-hidden="true"></i></span>
			<span class="title">菜单项</span>
		</a>
	</li>
	<li>
		<a href="#">
			<span class="icon"><i class="fa fa-home fa-2x" aria-hidden="true"></i></span>
			<span class="title">菜单项</span>
		</a>
	</li>
</ul>

display:block的用法：
        对于所有的块级元素来说都是不需要用display:block来定义的，因为块级元素的默认属性就是block；所以display:block比较常用于像是<a>和<span>等不是块级元素的元素中。如果不添加display:block，则一些大小设定对标签不起作用。

display:flax的用法：
        使块级元素可水平放置

不过此处，在ul中添加bootstrap中有的.list-unstyled类后，就可以去除上述代码中的display:block了。