页面布局—–display:flex详解

简介：

实例：

&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;meta charset="utf-8" /&gt;
		&lt;title&gt;</title&gt;
		<style&gt;
			/* 在css中设置 row */
			.content{
				width  : 500px;
				height : 300px;
				background-color : brown;
				
			}
			.content-item{
				width : 50px;
				height: 50px;
			}
			.item1{
				background-color: black;
			}
			.item2{
				background-color: blue;
			}
			.item3{
				background-color: red;
			}
		</style&gt;
	</head&gt;
	<body>
		<div class="content">
			<div class="content-item item1"></div>
			<div class="content-item item2"></div>
			<div class="content-item item3"></div>						
		</div>
	</body>
	
</html>

flex–direction 属性决定主轴的方向（即项目的排列 方向），其有一下几个属性：

row（默认值）：主轴为水平方向，起点在左端。
row–re verse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column–re verse：主轴为垂直方向，起点在下沿。

	/* 我们在父div中设置加入两行代码 */
	/* flex-direction:row; */	
	.content{
		width  : 500px;
		height : 300px;
		background-color : brown;
		
		/* 新加的代码 */
		display : flex;
		flex-direction:row;
	}

	/* flex-direction: row-reverse; */	
	.content{
		width  : 500px;
		height : 300px;
		background-color : brown;
		
		/* 新加的代码 */
		display : flex;
		flex-direction: row-reverse;
	}

	/* flex-direction: column; */	
	.content{
		width  : 500px;
		height : 300px;
		background-color : brown;
		
		/* 新加的代码 */
		display : flex;
		flex-direction: column;
	}

	/* flex-direction: column-reverse; */	
	.content{
		width  : 500px;
		height : 300px;
		background-color : brown;
		
		/* 新加的代码 */
		display : flex;
		flex-direction: column-reverse;
	}

flex-wr ap属性决定了如果一条轴线排不下，如何 换行。

now r ap（默认）：不换行。
wr a p：换行，第一行在上方。
wra p-reverse：换行，第一行在下方。

	/*设置默认不换行*/
	/*flex-wrap:nowrap;*/	
	.content{
		width  : 300px;
		height : 300px;
		background-color : brown;
		
		/* 新加的代码 */
		display : flex;
		flex-direction: row;
		flex-wrap:nowrap;
	}

	/*设置换行*/
	/*flex-wrap:wrap;*/	
	.content{
		width  : 300px;
		height : 300px;
		background-color : brown;
		
		/* 新加的代码 */
		display : flex;
		flex-direction: row;
		flex-wrap:wrap;
	}

	/*flex-wrap:wrap-reverse;*/	
	.content{
		width  : 300px;
		height : 300px;
		background-color : brown;
		
		/* 新加的代码 */
		display : flex;
		flex-direction: row;
		flex-wrap:wrap-reverse;
	}

justify–c ontent属性定义了项目在主轴上的对齐 方式。其有一下几个属性：

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space–ar ound：每个项目两侧的间隔相等。

	/* 左对齐*/
	/* justify-content:flex-start;*/
	.content{
		width  : 300px;
		height : 300px;
		background-color : brown;
		
		/* 新加的代码 */
		display : flex;
		flex-direction: row;
		flex-wrap:wrap;
		justify-content:flex-start;
	}

	/* 右对齐*/
	/* justify-content:flex-end;*/
	.content{
		width  : 300px;
		height : 300px;
		background-color : brown;
		
		/* 新加的代码 */
		display : flex;
		flex-direction: row;
		flex-wrap:wrap;
		justify-content:flex-end;
	}

	/* 居中*/
	/* justify-content:center;*/
	.content{
		width  : 300px;
		height : 300px;
		background-color : brown;
		
		/* 新加的代码 */
		display : flex;
		flex-direction: row;
		flex-wrap:wrap;
		justify-content:center;
	}

	/* 两端对齐*/
	/* justify-content:space-between;*/
	.content{
		width  : 300px;
		height : 300px;
		background-color : brown;
		
		/* 新加的代码 */
		display : flex;
		flex-direction: row;
		flex-wrap:wrap;
		justify-content:space-between;
	}

	/* 间隔相等*/
	/* justify-content:space-around;*/
	.content{
		width  : 300px;
		height : 300px;
		background-color : brown;
		
		/* 新加的代码 */
		display : flex;
		flex-direction: row;
		flex-wrap:wrap;
		justify-content:space-around;
	}