一、特点：
1、块级布局侧重垂直方向、行内布局侧重水平方向，flex布局是与方向无关的。
2、flex布局可以实现空间自动分配、自动对齐（flexible:弹性、灵活)
3、flex适用于简单的线性布局，更复杂的布局要交给grid布局;
使用的时候需要在父容器设置：display: flex;
二、图示概念：
三、flex container 属性
1、flex-direction
属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。例子
/* The direction text is laid out in a line */
flex-direction: row;
/* Like <row>, but reversed */
flex-direction: row-reverse;
/* The direction in which lines of text are stacked */
flex-direction: column;
/* Like <column>, but reversed */
flex-direction: column-reverse;
/* Global values */
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;
请注意！！！：
值 `row` 和 `row-reverse` 受 flex 容器的方向性的影响。
如果它的 dir 属性是 ltr，row 表示从左到右定向的水平轴，而 row-reverse 表示从右到左;
如果 dir 属性是 rtl，row 表示从右到左定向的轴，而 row-reverse 表示从左到右。
取值：
row：flex容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。row-reverse：表现和row相同，但是置换了主轴起点和主轴终点column：flex容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同column-reverse：表现和column相同，但是置换了主轴起点和主轴终点
2、flex-wrap
指定 flex 元素单行显示还是多行显示 。如果允许换行，这个属性允许你控制行的堆叠方向。 例子
flex-wrap: nowrap; /* Default value */
flex-wrap: wrap;
flex-wrap: wrap-reverse;
/* Global values */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: unset;
取值：
nowrap： flex 的元素被摆放到到一行，这可能导致溢出 flex 容器。 cross-start 会根据flex-direction的值 相当于 start 或 before。wrap：flex 元素 被打断到多个行中。cross-start 会根据flex-direction的值选择等于start 或before。cross-end 为确定的 cross-start 的另一端。wrap-reverse：和 wrap 的行为一样，但是 cross-start 和 cross-end 互换。
3、flex-flow
属性是 flex-direction 和 flex-wrap 的简写。做了解，一般不使用。
element { /* Main-axis is the block direction with reversed main-start and main-end. Flex items are laid out in multiple lines */
flex-flow: column-reverse wrap;
}
4、justify-content
属性定义了浏览器如何分配顺着父容器主轴的弹性元素之间及其周围的空间。例子
/* Positional alignment */
justify-content: center; /* 居中排列 */
justify-content: start; /* Pack items from the start */
justify-content: end; /* Pack items from the end */
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: flex-end; /* 从行尾位置开始排列 */
justify-content: left; /* Pack items from the left */
justify-content: right; /* Pack items from the right */
/* Baseline alignment */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;
/* Distributed alignment */
justify-content: space-between; /* 均匀排列每个元素 首个元素放置于起点，末尾元素放置于终点 */
justify-content: space-around; /* 均匀排列每个元素 每个元素周围分配相同的空间 */
justify-content: space-evenly; /* 均匀排列每个元素 每个元素之间的间隔相等 */
justify-content: stretch; /* Distribute items evenly Stretch 'auto'-sized items to fit the container */
/* Overflow alignment */
justify-content: safe center;
justify-content: unsafe center;
/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: unset;
取值：
start从行首开始排列。每行第一个元素与行首对齐，同时所有后续的元素与前一个对齐。flex-start从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。flex-end从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。center伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。left伸缩元素一个挨一个在对齐容器得左边缘，如果属性的轴与内联轴不平行，则left的行为类似于startright元素以容器右边缘为基准, 一个挨着一个对齐,如果属性轴与内联轴不平行,则right的行为类似于start.space-between在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。space-around在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。space-evenlyflex项都沿着主轴均匀分布在指定的对齐容器中。相邻flex项之间的间距，主轴起始位置到第一个flex项的间距,，主轴结束位置到最后一个flex项的间距，都完全一样。
5、align-items
属性将所有直接子节点上的align-self值设置为一个组。 align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。例子，可把代码copy到其他编辑器查看更多效果
/* Basic keywords */
align-items: normal;
align-items: stretch;
/* Positional alignment */
align-items: center; /* Pack items around the center */
align-items: start; /* Pack items from the start */
align-items: end; /* Pack items from the end */
align-items: flex-start; /* Pack flex items from the start */
align-items: flex-end; /* Pack flex items from the end */
align-items: self-start;
align-items: self-end;
/* Baseline alignment */
align-items: baseline;
align-items: first baseline;
align-items: last baseline; /* Overflow alignment (for positional alignment only) */
align-items: safe center;
align-items: unsafe center;
/* Global values */
align-items: inherit;
align-items: initial;
align-items: unset;
取值：
-
normal这个关键字的效果取决于我们处在什么布局模式中：- 在绝对定位的布局中，对于被替代的绝对定位盒子，这个效果和
start的效果的一样；对于其他所有绝对定位的盒子，这个效果和stretch的效果一样。 - 在绝对定位布局的静态位置上，效果和
stretch一样。 - 对于那些弹性项目而言，效果和
stretch一样。 - 对于那些网格项目而言，效果和
stretch一样，除了有部分比例或者一个固定大小的盒子的效果像start。 - 这个属性不适用于会计盒子和表格。
- 在绝对定位的布局中，对于被替代的绝对定位盒子，这个效果和
-
flex-start元素向侧轴起点对齐。 -
flex-end元素向侧轴终点对齐。 -
center元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。 -
baselinefirst baseline last baseline所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线。
-
stretch弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。
6、align-content
属性设置了浏览器如何沿着伸缩盒子容器（flex container）的纵轴和网格容器（grid container）的主轴在内容项之间和周围分配空间。例子，可把代码copy到其他编辑器查看更多效果
eg:表示侧轴方向间隙分布，即 横向、换行 布局时，行与行之间的间距处理。且同一行展示的item，该行所有item的高度默认为该行最大item高度。
/* 基本位置对齐 */
/*align-content不采用左右值 */
align-content: center; /* 将项目放置在中点 */
align-content: start; /* 最先放置项目 */
align-content: end; /* 最后放置项目 */
align-content: flex-start; /* 从起始点开始放置flex元素 */
align-content: flex-end; /* 从终止点开始放置flex元素 */
/* 默认对齐 */
align-content: normal;
/*基线对齐*/
align-content: baseline;
align-content: first baseline;
align-content: last baseline;
/* 分布式对齐 */
align-content: space-between; /* 均匀分布项目
第一项与起始点齐平，
最后一项与终止点齐平 */
align-content: space-around; /* 均匀分布项目
项目在两端有一半大小的空间*/
align-content: space-evenly; /* 均匀分布项目
项目周围有相等的空间 */
align-content: stretch; /* 均匀分布项目
拉伸‘自动’-大小的项目以充满容器 */
/* 溢出对齐 */
align-content: safe center;
align-content: unsafe center;
/* 全局属性 */
align-content: inherit; /* 继承 */
align-content: initial; /* 初始值 */
align-content: unset; /* 未设置 */
取值：
start所有行从容器的起始边缘开始填充。end所有行从容器的结束边缘开始填充。flex-start所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。flex-end所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。center所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。space-between所有行在容器中平均分布。相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的边对齐。space-around所有行在容器中平均分布，相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。space-evenly所有行沿垂直轴均匀分布在对齐容器内。每对相邻的项之间的间距，主开始边和第一项，以及主结束边和最后一项，都是完全相同stretch拉伸所有行来填满剩余空间。剩余空间平均的分配给每一行safe与对齐关键字一起使用。如果所选的关键字意味着项溢出对齐容器而导致数据丢失，则将对项进行对齐，就好像启动了对齐模式一样。unsafe无论元素和对齐容器的相对大小如何，都将使用给定的对齐值。
四、flex item 属性
1、flex-grow
属性定义弹性盒子项（flex item）的拉伸因子。例子
取值不能为负值；
.item1 {
flex-grow: 3
}
.item2 {
flex-grow: 2
}
表示：item1占用=3/5 item2占用=2/5
2、flex-shrink
属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。例子
取值不能为负值；
3、flex-basis
指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。
Note: 当一个元素同时被设置了 flex-basis (除值为 auto 外) 和 width (或者在 flex-direction: column 情况下设置了height) , flex-basis 具有更高的优先级
/* 指定<'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;
/* 固有的尺寸关键词 */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;
/* 在flex item内容上的自动尺寸 */
flex-basis: content;
/* 全局数值 */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;
取值：
<'width'>width 值可以是<length>; 该值也可以是一个相对于其父弹性盒容器主轴尺寸的百分数。负值是不被允许的。默认为 0。content基于 flex 的元素的内容自动调整大小。
4、flex
规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性，用来设置flex-grow,flex-shrink与 flex-basis。
大多数情况下，开发者需要将 flex 设置为 auto，initial，none，或一个无单位正数。尝试调整下面的 flex 容器以观察这些值的作用:
/* Basic values */
flex: auto;
flex: initial;
flex: none;
flex: 2;
/* One value, unitless number: flex-grow */
flex: 2;
/* One value, width/height: flex-basis */
flex: 10em;
flex: 30px;
/* Two values: flex-grow | flex-basis */
flex: 1 30px;
/* Two values: flex-grow | flex-shrink */
flex: 2 2;
/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
/* Global values */
flex: inherit;
flex: initial;
flex: unset;
flex 属性可以指定1个，2个或3个值。
单值语法: 值必须为以下其中之一:
- 一个无单位数(
number): 它会被当作<flex-grow>的值。 - 一个有效的宽度(
width) 值: 它会被当作<flex-basis>的值。 - 关键字
none，auto或initial.
双值语法: 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。第二个值必须为以下之一：
- 一个无单位数：它会被当作
<flex-shrink>的值。 - 一个有效的宽度值: 它会被当作
<flex-basis>的值。
三值语法:
- 第一个值必须为一个无单位数，并且它会被当作
<flex-grow>的值。 - 第二个值必须为一个无单位数，并且它会被当作
<flex-shrink>的值。 - 第三个值必须为一个有效的宽度值， 并且它会被当作
<flex-basis>的值。
取值：
initial元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器 。相当于将属性设置为"flex: 0 1 auto"。auto元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 "flex: 1 1 auto".none元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为"flex: 0 0 auto"。
5、order
属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。例子
/* Numerical value including negative numbers */
order: 5;
order: -5;
/* Global values */
order: inherit;
order: initial;
order: unset;
注意: order 仅仅对元素的视觉顺序 (visual order) 产生作用，并不会影响元素的逻辑或 tab 顺序。 order 不可以用于非视觉媒体，例如 speech。
6、align-self
该属性会对齐当前 flex 行中的 flex 元素，并覆盖已有的align-items 的值. 如果任何 flex 元素的侧轴方向 margin 值设置为 auto，则会忽略 align-self。In Grid, it aligns the item inside the grid area. 在Flexbox中会按照cross axis (当前flex 元素排列方向的垂直方向) 进行排列.
align-self: auto
align-self: flex-start
align-self: flex-end
align-self: center
align-self: baseline
align-self: stretch
align-self: inherit
取值：
auto：设置为父元素的align-items值，如果该元素没有父元素的话，就设置为stretch。CSS align-items属性将所有直接子节点上的align-self值设置为一个组。 align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。flex-start：flex 元素会对齐到 cross-axis 的首端。flex-end：flex 元素会对齐到 cross-axis 的尾端。center：flex 元素会对齐到 cross-axis 的中间，如果该元素的 cross-size 的尺寸大于 flex 容器，将在两个方向均等溢出。baseline：所有的 flex 元素会沿着基线对齐，stretch：flex 元素将会基于容器的宽和高，按照自身 margin box 的 cross-size 拉伸。
本文所有例子参考utools-css文档；
