Css弹性盒模型

传统的盒状模型：基于display属性+position属性+float属性
弹性盒模型：
1、Flex 布局是弹性布局
2、任何容器都可以设定为Flex布局（行内元素inline-box也可以设定为行内元素）
注意：设定为Flex布局后，其子元素的float,vertical-align ,clear将失效。
简便、完整、响应式地实现各种页面布局

弹性盒角色：
1、容器
2、容器内部的成员项目

容器的属性（写在容器上）

1、flex-directon
2、flex-wrap
3、flex-flow
4、justify-content
5、align-items
6、align-content

项目的属性（写在项目上）

1、order
2、flex-grow
3、flex-shrink
4、flex-basis
5、flex
6、align-self

属性介绍：
用在容器上
1、flex-direction
决定主轴（main axis）的方向,即项目排列方向
取值

flex-direction:row(默认值)/row-reverse/column/column-reverse

2、flex-wrap
规定容器内项目如何换行
取值

flex-wrap:nowrap/wrap/wrap-reverse

3、flex-flow
集flex-direction 和 flex-wrap为一体
取值

flex-flow:<flex-direvtion>||<flex-wrap>  默认值 row nowrap

4、justify-content
规定项目在主轴上的对齐方式
取值

justify-content:flex-start|flex-end|center|space-between|space-around

5、align-items
规定项目在交叉轴上的对齐方式
取值

align-item:flex-start|flex-end|center|stretch|baseline

6、align-content
定义多根轴线的对齐方式，只有一根轴线不起作用（这个看不懂）
取值：

align-content:flex-start|flex-end|center|space-between|space-around|strectch

用在项目上
1、order
定义项目的排列顺序，数字越小越靠前，默认值0
2、flex-grow
定义项目的放大比例，默认为0，存在剩余空间也不放大
3、flex-shrink
定义项目的缩小比例，默认为1，空寂不足，则缩小项目
4、flex-basis
定义了在分配多余空间时，项目占据的主轴空间
5、flex
flex-grow、flex-shrink和flex-basis的合集 默认值0 1 auto

auto(1 1 auto) | none(0 0 auto)

6、align-self
允许单个项目自己定义对齐方式，可已覆盖align-items，默认继承父元素
取值

auto | flex-start | flex-end | center | baseline | stretch

end~~
引用：Flex布局教程 - 阮一峰