一、flex弹性的概念：
弹性盒子是一种用于按行或按列布局元素的一维布局方法，元素可以膨胀以填充额外的空间，收缩以适应更小的空间，适用于任何元素上，如果一个元素使用了flex弹性布局（以下都会简称为：flex布局），则会在内部形成BFC，flex布局已经得到了所有浏览器的支持，这意味着，现在就能放心，安全的使用这项技术。
二 、flex主轴与交叉轴：
- 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。
- 它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
- 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
- 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；
- 交叉轴的开始位置叫做cross start，结束位置叫做cross end。
- 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
三、属性
四、容器属性
-
flex-direction
- 决定主轴的方向（即项目的排列方向）
flex-direction: row | row-reverse | column | column-reverse;
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
-
flex-wrap
- 默认情况下，项目都排在一条线上，无论是否给定宽度，都不会主动换行
flex-wrap: nowrap | wrap | wrap-reverse;
nowrap（默认值）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。(注意:因为是针对容器, 所以是换行, 不是倒转元素)
-
flex-flow
- flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
-
justify-content
- 定义了项目在主轴上的对齐方式
- `flex-start`（默认值）：左对齐
- `flex-end`：右对齐
- `center`： 居中
- `space-around`：每个项目两侧的间隔相等。
- `space-between`：两端对齐，项目之间的间隔都相等。
- `space-evenly`：每个项目的间隔与项目和容器之间的间隔是相等的。
- 关于start和flex-start区别 (start并不是一个规范的属性，可以理解为浏览器自主实现的)
start
从行首开始排列。 每行第一个元素与行首对齐,同时所有后续的元素与前一个对齐。
flex-start
从行首开始排列。每行第一个弹性元素与行首对齐,同时所有后续的弹性元素与前一个对齐。
flex-start是针对所有flex盒子项进行排列，而start是针对所有项进行排列，不管是不是flex盒子。这就意味着 reverse之类的（如row-reverse）排列方式将不会对设置start的项目生效，只会针对设置了flex-start的项目生效。
-
align-items
- 属性定义项目在交叉轴上如何对齐
- `flex-start`：交叉轴的起点对齐。
- `flex-end`：交叉轴的终点对齐。
- `center`：交叉轴的中点对齐。
- `baseline`: 项目的第一行文字的基线对齐。
- `stretch`（默认值）: 如果项目未设置高度或设为auto，将占满整个容器的高度。
-
align-content
- 定义了多根轴线的对齐方式，前提是需要设置flex-wrap: wrap，否则不会有效(只能应用于多行的情况下)
注意: 平常用的不多, 可以自己测试一下
- `flex-start`：与交叉轴的起点对齐。
- `flex-end`：与交叉轴的终点对齐。
- `center`：与交叉轴的中点对齐。
- `space-between`：与交叉轴两端对齐，轴线之间的间隔平均分布。
- `space-around`：每根轴线两侧的间隔都相等。
- `stretch`（默认值）：轴线占满整个交叉轴。
align-content会将所有的元素认为是一个整体并进行相应的处理、而align-items则会按照每一行进行处理：
五、项目属性
-
order
- 定义项目的排列顺序。数值越小，排列越靠前，默认为0，可以是负数。
-
flex-grow
- flex容器中剩余空间的多少应该分配给项目，也称为扩展规则。
- 最终的项目的宽度为：自身宽度 + 容器剩余空间分配宽度，flex-grow默认值是0,最大值是1，超过1按照1来扩展
容器总宽度800, 每个项目宽度为200,左间距10, 容器剩余空间分配宽度170- 计算方法就是: 把剩余的空间根据设置的值进行分配, 不够分配的话就根据设置值的大小进行比例分配
-
flex-shrink
- 指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值，
根据设置的值进行比例收缩 - 注意: 如果项目盒子的宽度设置超过了容器总宽度的值, 是根据项目宽度的设置比例进行分配
-
flex-basis
- 指定了子项在容器主轴方向上的初始大小，优先级高于自身的宽度width,默认值: auto
-
flex
flex 属性是 flex-grow , flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto 。后两个属性可选。
-
align-self
允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto ，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch 。
align-self: auto | flex-start | flex-end | center | baseline | stretch
