一、兼容性
正如标题所示，flex 也是 CSS3 中的一员，正如大多数 CSS3 属性一样，flex 的兼容性算不上特别好。
caniuse.com
比较有意思的是，flex 本身经历了好几次更迭才最终定稿。如果见到以下写法请不要觉得惊讶：
-
display:box/inline-box;2009年版本，仅 safari 支持； -
display:flexbox/inline-flexbox;2011年版本，仅IE10支持； -
display:flex/inline-flex;最新版本，主流浏览器大都支持，但 webkit 系列的需要添加-webkit-前缀。
注意 caniuse 网站上标注的 flex 是从 IE11 才开始部分支持，但其实我们可以通过上面的第二种写法让 IE10 也部分支持，鉴于 flex 的写法的特殊性，不建议自己手写各种版本，最好用 autoprefixer 之类的工具自动生成。
二、基本概念
-
通过设置
display: flex/line-flex;，我们即将目标元素设置成了 Flex 容器（flex container），flex与inline-flex的差别是，前者对外展示的效果更接近一个块级元素，而后者更接近于一个行内元素； -
flex 容器的子元素自动成为容器成员，称为 Flex项目（flex item）；
-
Flex 容器内存在主轴和交叉轴两个概念，它们并不是实际存在的轴线，它只是标识了容器的方向，用于决定容器内成员的排列方式（容器内成员默认按主轴方向排列），主轴默认沿水平方向，交叉轴默认沿水平方向，它们都可以通过设置容器属性而改变方向；
-
主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
-
单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
三、容器的属性
（1）flex-direction
flex-direction: row | row-reverse | column | column-reverse;
flex-direction 决定了主轴的方向，进而决定了容器内成员的排列方向。各种取值与主轴方向对应关系如下：
- row: 主轴延水平方向向右
- row-reverse: 主轴延水平方向向左
- column: 主轴延垂直方向向下
-
column-reverse: 主轴延垂直方向向上
flex-direction
（2）flex-wrap
flex-wrap: nowrap | wrap | wrap-reverse;
类似于 css 中的 white-space 属性，用于决定容器一行元素溢出时的选择。
- nowrap: 不换行(默认)，通过压缩容器内成员的宽度/高度（改变前面的
flex-wrap交叉轴为竖直方向，则可能压缩高度）实现，即使设置了成员的width/height属性也会被忽略，而设置了min/max-width/height的成员则不会； - wrap: 正常换行，行与行之间，延交叉轴方向排列；
- wrap-reverse: 换行，但行与行之间，延交叉轴反方向排列。
flex-wrap
（3）flex-flow
flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为row nowrap
（4）justify-content
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
justify-content 决定了容器内成员在主轴方向上的对齐方式。
- flex-start: 以主轴起点为起点对齐（默认左对齐）；
- flex-end: 以主轴终点为终点对齐（默认右对齐）；
- center: 以主轴居中对齐（水平/竖直居中，依 flex-direction 而定）；
- space-between: 以主轴两端对齐，项目之间的间隔都相等；
- space-around: 以主轴两端对齐，但跟
space-between不同的是，它在两侧各有 1/2 的间距； - space-evenly: 以主轴两端对齐，两侧各有 1 倍的间距（新增属性，兼容性不太好，详见）。
justify-content
（5）align-items
align-items: flex-start | flex-end | center | baseline | stretch;
align-items 决定了容器内成员在交叉轴方向上的对齐方式。
- flex-start: 以交叉轴起点为起点对齐（默认顶部对齐）；
- flex-end: 以交叉轴终点为终点对齐（默认底部对齐）；
- center: 以交叉轴居中对齐（水平/竖直居中，依 flex-direction 而定）；
- baseline: 项目的第一行文字的基线对齐；
- stretch（默认值）: 如果项目未设置宽度/高度或设为auto，将占满整个容器的宽度/高度（默认拉伸高度，具体视
flex-direction取值而定）。
align-items
（6）align-content
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用，也就是说，只有在容器内成员在一行内放不下，产生换行的时候（flex-wrap 不能为 nowrap）决定行与行之间的排列方式。
- flex-start: 与交叉轴的起点对齐；
- flex-end: 与交叉轴的终点对齐；
- center: 与交叉轴的中点对齐；
- space-between: 与交叉轴两端对齐，轴线之间的间隔平均分布；
- space-around: 与交叉轴两端对齐，但两端各有 1/2 间距；
- space-evenly: 与交叉轴两端对齐，但两端各有 1 倍间距（兼容性不太好）；
- stretch（默认值）: 轴线占满整个交叉轴。
align-content
四、成员的属性
（1）order
order: <integer>;
order 属性定义成员在主轴上的排列顺序，它将忽略普通的文档流，数值越小的成员，排列越靠前，默认为 0。
order
（2）flex-grow
flex-grow: <number>;
flex-grow 属性定义当成员不能占满主轴时，容器内空白位置在成员间的划分方式，它将会使得成员延主轴被拉伸，默认为 0。它的数值不代表具体的大小，而是代表了所占比例。如三个成员 order 分别为 1、2、1，那么第一、第三个成员将各被拉伸容器空白位置 1/4 的大小，而第二个成员则会被拉伸容器空白位置 1/2 的大小。当成员能够占满主轴时，flex-grow 属性无效。
flex-grow
（3）flex-shrink
flex-shrink: <number>;
与 flex-grow 恰好相反的是， flex-shrink 属性定义当成员占满主轴并且溢出时（flex-wrap 必须为 nowrap），它将会使得成员延主轴方向被压缩，默认为 1。与 flex-grow 一样，它的值不代表具体大小，而是代表压缩比例。
flex-shrink
（4）flex-basis
flex-basis: <length> | auto;
flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间，auto 为元素原本应该占据的大小。
（5）flex
flex: flex-grow flex-shrink flex-basis | auto | initial | none;
可以认为是 flex-grow、flex-shrink、 flex-basis 的合成属性，也可以取值：
- auto: 即 1 1 auto;
- initial: 即 0 1 auto；
- none: 即 0 0 auto。
（6）align-self
align-self: auto | flex-start | flex-end | center | baseline | stretch | space-evenly;
align-self 顾名思义，就是决定自身沿交叉轴方向的排列方式，它可以用来覆盖容器上设置的 align-items 效果。可选择的属性、效果都与 align-items 类似，但它多了一个 auto 属性（默认），相当于继承父元素的 align-items 属性。
alignali-self
本文较多地参考了 阮一峰的博客，向大佬致敬！
网友评论