弹性盒子 Flex

一、Flex 布局：

任何一个容器，行内元素都可以使用 flex 布局，Webkit 内核的浏览器，必须加上 -webkit 前缀，设置此布局后，子元素的 float，clear vertical-align 属性将失效。

二、基本概念：

三、容器的属性：

1. flex-direction：

row（默认）：主轴为水平方向，起点在左侧 ；row-reverse：起点在右侧

column：主轴为垂直方向，起点在上沿； column-reverse：下沿

2. flex-wrap：

nowrap（默认）：不换行；wrap：换行 第一行在上方；wrap-reverse：第一行在下方

3. flex-flow：

flex-direction 和 flex-wrap 的简写

4. justify-direction：

项目在主轴上的对齐方式

5. align-items：

在交叉轴上如何对齐

6. align-content：

多根轴线的对齐方式

四、项目的属性：

1. order：项目的排列顺序，数值越小，排列越靠前

2. flex-grow：项目的放大比例，默认为0

3. flex-shrink：缩小比例，默认为1，负值无效

4. flex-basis：在分配多余空间之前，项目占据的主轴空间，默认为 auto，可以设置固定值

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，表示继承父元素的 align-items，如果没有父元素，则等同于 stretch。