flex布局

flexbox布局基于块和内嵌流,由主轴、侧轴作为主导。

注意：
1.css 列（CSS columns）在弹性盒子中不起作用
2.float, clear and vertical-align 在flex项目中不起作用
3.UC浏览器有坑，flex布局对span不起作用 需改用div级别块元素；align-self在android不起作用

属性介绍

适用于伸缩容器（父元素）的属性

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

复合属性 flex方向和换行属性的结合

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: [ <’flex-grow’> <’flex-shrink’> <’flex-basis’> ]默认值：0 1 auto；

其中第二个和第三个参数（flex-shrink、flex-basis）是可选参数。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值
flex:0 占据所需空间 flex:1占据剩余所有内容.

6. align-self

用来在单独的伸缩项目上覆写默认的对齐方式。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。