flexbox

一年前学css3的时候就感觉flex-box非常好用，但是并没有对其进行深入研究以及对其抱有兼容性的担忧，导致一直未进行使用。最近感觉flexbox突然很常见了，赶紧学习下不能太老土。

Flex布局是什么

由其名称我们可以看出来，“弹性盒子模型”，恩，听名字就很灵活好用。看看如何使用：

.box{ display: flex; }

//内联元素
.inline-box{ display: inline-flex; }

注意
设置flex后，子元素的float、clear和vertical-align属性将失效。

语法

flex的语法比较复杂，我们总结下：
其主要包括两部分，容器 和 元素，容器负责整个容器，包括排列方式，等的设置。元素主要为容器内部的内容，主要包括元素的顺序，缩放等元素自身的属性。

容器

属性	功能	值
flex-direction	元素排列方向	row 水平顺序， row-reverse 水平倒序， column 垂直顺序， column-reverse 垂直倒叙
flex-wrap	类似文字white-space 控制元素超出换行	nowrap 不换行，文字会压缩；wrap 换行，顺序 wrap-reverse 换行 行序倒序
flex-flow	flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。	-
justify-content	元素的水平对齐方式	flex-start，flex-end，center，space-between两端对齐，间隔相等，space-around：每个项目两侧的间隔相等
align-items	单行垂直对齐方式	flex-start,flex-end, center, baseline, stretch:拉伸
align-content	多行垂直对齐方式	flex-start， flex-end， center ，space-between ，space-around ， stretch

元素

属性	功能	值
order	规定顺序，数值越小越靠前	0，1，2…
flex-grow	元素容器过大，元素放大比	0，1，2
flex-shrink	缩小比例	0，1，2
flex-basis	元素分配空间前，占用的宽度或高度	length , auto
flex	前三个的缩写	默认值为0 1 auto
align-self	元素单独设置对齐方式	flex-start， flex-end， center ，space-between ，space-around ， stretch

应用

看起来很复杂，但实在是好用！哪里好用？试几个例子吧：

垂直居中

单元素：

.container{
	display: flex;
	justify-content: center;
	align-items: center;
}

一个两个都可以！！！ 很轻易！！
效果：

垂直排列：添加flex-flow: column即可。

.container{
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
}