Flex布局
1.Flex为"Flexible Box"的简称，即为弹性布局，可作用于任何容器上。给div这类块状元素元素设置display:flex或者给span这类内联元素设置display:inline-flex，flex布局即创建！
其中，直接设置display:flex或者display:inline-flex的元素称为flex容器，里面的子元素称为flex子项。
(flex和inline-flex区别在于，inline-flex容器为inline特性，因此可以和图片文字一行显示；flex容器保持块状特性，宽度默认100%，不和内联元素一行显示。)
2.Flex布局的属性分为两种，即作用域容器上和作用于flex子项上：
|
作用在flex容器上
|
作用在flex子项上
|
|---|---|
|
|
无论作用在flex容器上，还是作用在flex子项，都是控制的flex子项的呈现，只是前者控制的是整体，后者控制的是个体。
子元素的float、clear和vertical-align属性将失效。
作用在flex容器上的CSS属性
1. flex-direction ：决定主轴的方向（即项目的排列方向）语法如下：
flex-direction: row | row-reverse | column | column-reverse;
- row：默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。如果当前水平文档流方向是
rtl（如设置direction:rtl），则从右往左。 - row-reverse：显示为行。但方向和
row属性值是反的。 - column：显示为列。
- column-reverse：显示为列。但方向和
column属性值是反的。
2.flex-warp：用来控制子项整体单行显示还是换行显示，如果换行，则下面一行是否反方向显示。
flex-warp: nowarp | warp | warp-reserve;
- nowarp：默认值，表示单行显示，不换行。
- warp：宽度不足换行显示。
- warp-reserve：宽度不足换行显示，但是是从下往上开始，也就是原本换行在下面的子项现在跑到上面。
3.flex-flow：属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性，语法如下：
flex-flow: (flex-direction) || (flex-warp);
当多属性同时使用的时候，使用空格分隔。
4.justify-contet：属性决定了主轴方向的子项的对齐和分布方式。
justify-contet: flex-start | flex-end | center | space-between | space-around | space-evenly;
- flex-start：默认值。与文档流方向相关。默认表现为左对齐。
- flex-end：与文档流方向相反，默认表现为从右向左。
- center：表现为居中对齐。
- space-between：表现为两端对齐，多余的空白间距只在元素中间区域分配。
- space-around：表现为每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
- space-evenly：表现为每个flex子项之间的两侧空白间距完全相等。
5.align-items：属性决定了交叉轴方向的子项的对齐和分布方式
align-items: stretch | flex-start | flex-end | center | baseline;
- stretch：(默认值)flex子项拉伸。如果未设置高度或设为auto，将占满整个容器的高度。
- flex-start：与文档流方向相关。默认表现为容器顶部对齐。
- flex-end：与文档流方向相关，默认表现为容器底部对齐。
- center：表现为与主轴垂直居中对齐。
- baseline：表现为所有flex子项都相对于flex容器的第一行文字基线对齐。
6.align-content：属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly;
作用在flex子项上的CSS属性
1. order：可以通过设置order改变某一个flex子项的排序位置。（order越小顺序越靠前）
order：integer; (整数值，默认为 0)
2.flex-grow：属性定义项目的放大比例，默认为0；扩展的就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空白间隙。
flex-grow：number; (默认为 0
3.flex-shrink：属性定义了项目的缩小比例，默认为1；shrink是“收缩”的意思，flex-shrink主要处理当flex容器空间不足时候，单个元素的收缩比例。
flex-shrink：number; (数值，默认为 1)
例子：现在只给第2个flex子项b元素设置flex：shrink
- 默认为1；则3个子项1:1:1收缩
- 如果为0，则该子项不收缩，按原定大小显示；则b不收缩，剩下2个flex子项等比例收缩；
- 如果为2，则完全收缩尺寸比例分配为1:2:1，b子项收缩的宽度b最大，是其他元素的2倍。
4.flex-basis：定义了在分配剩余空间之前元素的默认大小。（它可以设为跟width或height属性一样的值（比如100px），则项目将占据固定空间。）
flex-basisi：<length> | auto; (数值，默认为auto)
- 默认值是
auto，就是自动。有设置width则占据空间就是width，没有设置就按内容宽度来。 - 如果同时设置
width和flex-basis，就渲染表现来看，会忽略width。以下例子设置width：100px, flex-basis：150px；最终显示为150px；
- 选择最后一个
flex-basis:240px会发现flex子项的宽度并不是240px，因为此时剩余空间不足，3个子项1:1:1收缩的缘故。
5.flex：属性是flex-grow，flex-shrink和flex-basis的缩写。（默认值为 0 1 auto）
flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
其中第2和第3个参数（flex-shrink和flex-basis）是可选的。默认值为0 1 auto。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
6.align-self：指控制单独某一个flex子项的垂直对齐方式，写在flex容器上的这个align-items属性，后面是items，有个s，表示子项们，是全体；这里是self，单独一个个体。其他区别不大，语法几乎一样。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
唯一区别就是align-self多了个auto（默认值），表示继承自flex容器的align-items属性值。其他属性值含义一模一样。
参考来自：Flex布局教程：语法篇 ；
写给自己看的display：flex布局教程；