flexbox-弹性盒子详解

在传统布局中，我们依赖的是diplay+position+float，使特殊的布局非常不方便。那么今天我们说css3中的弹性盒子，使我们在进行布局时，更加的便捷。

1.display:flex表示的是把盒子设置为弹性盒子。

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		body,html,#box {
			width: 100%;	
			height: 100%;
		}
		#box {
			/*表示的是把父盒子设置为弹性盒子*/
			display: flex;
		}
		#box>div {
			flex: 1;/*表示的是每个盒子占一份*/
			height: 200px;
			border: 1px solid #000;
			background-color: red;
		}
	</style>
</head>
<body>
	<div id="box">
		<div class="box1">1</div>
		<div class="box2">2</div>
		<div class="box3">3</div>
	</div>
</body>
</html>

2.flex-direction表示的是盒子的排列方向，有三个属性值，分别为row、column、row-reverse、column-reverse。row表示的是水平从左到右排列，row-reverse表示的是水平从右往左排列，column表示的是垂直从上往下排列，column-reverse表示的是垂直从下往上排列。下面以column-reverse为例，代码如下：

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		body,html,#box {
			width: 100%;	
			height: 100%;
		}
		#box {
			/*表示的是把父盒子设置为弹性盒子*/
			display: flex;
			/*表示垂直从下往上排列*/
			flex-direction: column-reverse;
		}
		#box>div {
			flex: 1;
			border: 1px solid #000;
		}
	</style>
</head>
<body>
	<div id="box">
		<div class="box1">1</div>
		<div class="box2">2</div>
		<div class="box3">3</div>
	</div>
</body>
</html>

3.flex-wrap表示的是否换行，有三个属性，分别为：nowrap,wrap,wrap-reverse。nowrap表示的是不换行，wrap表示的是换行，wrap-reverse表示的是换行并反转。下面以wrap-reverse为例，代码如下：

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		body,html,#box {
			width: 100%;	
			height: 100%;
		}
		#box {
			/*表示的是把父盒子设置为弹性盒子*/
			display: flex;
			/*表示的是换行并且反转*/
			flex-wrap: wrap-reverse;
		}
		#box>div {
			width: 400px;
			height: 200px;
			border: 1px solid #000;
			background-color: red;
		}
	</style>
</head>
<body>
	<div id="box">
		<div class="box1">1</div>
		<div class="box2">2</div>
		<div class="box3">3</div>
		<div class="box1">4</div>
		<div class="box2">5</div>
		<div class="box3">6</div>
		<div class="box1">7</div>
		<div class="box2">8</div>
		<div class="box3">9</div>
	</div>
</body>
</html>

4.justify-content表示的是垂直方向上内容对齐属性，有五个属性值，分别是：flex-start、flex-end、center、space-between、space-around。其中，flex-start表示的弹性盒子向行头紧密填充、flex-end表示的是弹性盒子向行尾紧密填充，center表示的是居中紧密填充，space-between表示的是弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start，space-around表示的是弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		body,html,#box {
			width: 100%;	
			height: 100%;
		}
		#box {
			/*表示的是把父盒子设置为弹性盒子*/
			display: flex;
			/*表示的是换行并且反转*/
			flex-wrap: wrap;
			/*表示的是对齐属性*/
			justify-content: space-around;
		}
		#box>div {
			width: 400px;
			height: 200px;
			border: 1px solid #000;
			background-color: red;
		}
	</style>
</head>
<body>
	<div id="box">
		<div class="box1">1</div>
		<div class="box2">2</div>
		<div class="box3">3</div>
		<div class="box1">4</div>
		<div class="box2">5</div>
		<div class="box3">6</div>
		<div class="box1">7</div>
		<div class="box2">8</div>
		<div class="box3">9</div>
	</div>
</body>
</html>

5.align-items表示的是垂直方向上的内容对齐属性，有五个属性值，分别是：flex-start、flex-end、center、baseline、stretch。其中flex-start、flex-end、center和上面justify-content的意义是一样的，baseline是以基线为准，stretch表示的是默认情况下的状态，被拉伸。下面以center为例，代码如下：

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		body,html,#box {
			width: 100%;	
			height: 100%;
		}
		#box {
			/*表示的是把父盒子设置为弹性盒子*/
			display: flex;
			flex-direction: column;
			/*表示的是换行并且反转*/
			flex-wrap: wrap;
			/*表示的是对齐属性*/
			align-items: center;	
		}
		#box>div {
			width: 400px;
			height: 100px;
			border: 1px solid #000;
			background-color: red;
		}
	</style>
</head>
<body>
	<div id="box">
		<div class="box1">1</div>
		<div class="box2">2</div>
		<div class="box3">3</div>
		<div class="box1">4</div>
		<div class="box2">5</div>
		<div class="box3">6</div>
		<div class="box1">7</div>
		<div class="box2">8</div>
		<div class="box3">9</div>
	</div>
</body>
</html>

6.align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items , 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。属性值有：flex-start、flex-end、center、space-between、space-around、stretch。下面以space-around为例，代码如下：

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		body,html,#box {
			width: 100%;	
			height: 100%;
		}
		#box {
			/*表示的是把父盒子设置为弹性盒子*/
			display: flex;
			/*表示的是换行并且反转*/
			flex-wrap: wrap;
			/*表示的是对齐属性*/
			align-content: space-around;	
		}
		#box>div {
			width: 400px;
			height: 100px;
			border: 1px solid #000;
			background-color: red;
		}
	</style>
</head>
<body>
	<div id="box">
		<div class="box1">1</div>
		<div class="box2">2</div>
		<div class="box3">3</div>
		<div class="box1">4</div>
		<div class="box2">5</div>
		<div class="box3">6</div>
		<div class="box1">7</div>
		<div class="box2">8</div>
		<div class="box3">9</div>
	</div>
</body>
</html>

7.order是用来设置元素的顺序。属性值可以设置为number值，设置为几就位于第几位。

以上为基本常用的弹性盒子的属性。