初识Flexbox 布局

一、首先创建一个flexbox容器

	.flexboxcontainer{
		display: -webkit-flex;
		display: flex;

	}

二、flex项按行排列

flex项目默认按行排列，也可设置为column，按列排列，默认设置为row

	.flexboxcontainer{
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
                  flex-direction: row;
	}
	.flexboxcontainer>div{
		width:100px;
		height:100px;
		background-color:#e46119;
		border:1px solid #ccc;
		margin:5px;
	}

三、flex项按列排列

	.flexboxcontainer{
		border:1px solid #ccc;
		width:450px;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
	}

四、flex项左(flex-start)对齐和右(flex-end)对齐（如果是row，设置justify-content;如果是column，设置align-items）

	.flexboxcontainer{
		border:1px solid #ccc;
		width:450px;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
	}

五、flex项行居中(center)对齐，列居中同理

	.flexboxcontainer{
		border:1px solid #ccc;
		width:450px;
		height:300px;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-align-items: center;
		align-items: center;
	}

六、自定义比例分配

七、多行居中布局（webkit内核浏览器、IE11支持，Firefox不支持）