flexBox布局基于块和内嵌流,由主轴、侧轴作为主导。
注意：
1.css 列（CSS columns）在弹性盒子中不起作用
2.float,clear and vertical-align 在flex项目中不起作用
属性介绍
适用于伸缩容器（父元素）的属性
1. display: flex | inline-flex;
flex：将对象作为弹性伸缩盒显示。inline-flex：将对象作为内联块级弹性伸缩盒显示。伸缩盒最新版本
Box inline-Box（伸缩盒最老版本）
flexBox inline-flexBox（伸缩盒过渡版本）
2. flex-direction:row | row-reverse | column | column-reverse
横向 反转横向 纵向 反转纵向
决定主轴main-axis方向，影响justify-content align-items
3. flex-wrap:nowrap | wrap | wrap-reverse
不换行 换行 反转换行
4. flex-flow: flex-direction || flex-wrap
5. justify-content:flex-start | flex-end | center | space-between | space-around 子元素主轴对齐方式
6. align-items 子元素侧轴对齐方式
7. align-content: flex-start | flex-end | center | space-between | space-around | stretch
多行元素在父元素中的对齐方式，一行时无效
适用于伸缩项目（子元素）的属性
1. order: integer
控制伸缩项目在他们的伸缩容器出现的顺序。
2. flex-grow: number (默认值为： 0)
按比例应扩展多少剩余空间
3. flex-shrink: number (默认值为： 1)
按比例应收缩多少剩余空间
4. flex-basis: length | percent | auto (默认值为： auto)
设置伸缩基准值，剩余的空间按比率进行伸缩。
假设上div、下div 内部为空 flex:1 auto;
- flex:1 100%;则无论内部元素为多宽，则三个div均是宽百分百。
- flex:3 auto; 宽度根据内部元素撑开，如果内部元素很宽，则是100%，三个div均是宽百分百；如果内部元素很窄，则是60%，达到1：3：1；
- flex:3 0; 则无论内部元素为多宽 均是1：3：1；
demo见：flex
以上两个图片中均是设置li的宽度 计算出剩余空间所得伸缩基准，如果未设置li宽度，需自行定义伸缩基准
5. flex: none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]
其中第二个和第三个参数（flex-shrink、flex-basis）是可选参数。flex:0 占据所需空间 flex:1占据剩余所有内容.
6. align-self
用来在单独的伸缩项目上覆写默认的对齐方式。