任何一个容器都可以指定为flex布局
设为flex布局后，子元素的，float.clear.vertical-align的属性会失效
二:基本概念
采用flex布局的元素:容器
flex里的项目:子元素
两条轴:main axis:水平的主轴
cross axis:垂直的交叉轴
主轴开始的位置:main start
主轴结束的位置:main end
交叉轴开始的位置:main start
交叉轴开始的位置:main end
三:容器属性
1.flex-direction
.box{
flex-direction:属性
}
属性:
row默认主轴为水平方向，起点在左端
row reverse默认主轴为水平方向，起点在左右端
column默认主轴为交叉轴方向，起点在左右端
column-reverse默认交叉轴为水平方向，起点在左右端
2.flex-wrap
默认情况下，项目排在一条轴线，若排不下，如何换行
.box{
flexwrap:属性
}
属性:nowrap不换行
wrap第一行在上方
wrap reverse第一行在下方
3.flex-flow
.box{
flex-flow:<flex-direction><flex-wrap>
}
4.justify-content
.box{
justity-content:属性
}
属性:flex-start
flex-end
center
space-between
space-around
5.align-items
.box{
align-items:属性
}
属性:flex start
flex end
center
baseline
strentch
6.align cotent
.box{
align content:属性
}
四:项目属性
1.order定义项目排列顺序，数值越小排列越靠前
2.flex grow
定义项目放大比例，默认为0，
3.flex shrink
定义项目缩小比例
.item{
flex shrink<number>;
}
4.flex basis
定义分配多余空间之前，项目所占的主轴空间
5.flex
.item{
flex:none/flex grow/flex shrink/flex basis
}
6.align self
