flex

容器

display:flex

行内元素

display:inline-flex

容器上可加的属性

flex-direction:row | row-reverse | column | column-reverse;

//属性决定主轴的方向（即项目的排列方向）。
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
===============================================================

flex-wrap: nowrap | wrap | wrap-reverse;

//属性定义，如果一条轴线排不下，如何换行。
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

===============================================================

flex-flow: || ;

//属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
（当然只有在水平排列的时候才可以设两个值，才需要wrap是否需要换行）

flex-flow:row wrap;//水平排列双值
flex-flow:warp;//等价于上面默认是水平排列换行的简写

================================================================

justify-content:flex-start | flex-end | center | space-between | space-around;

//属性定义了项目在主轴上的对齐方式。具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
flex-start（默认值）：左对齐(受flex-direction属性影响，你设置的主轴的方向,假如主轴row-reverse那么就是右对齐了，它的起始在右边，column那么就是在上对齐，column-reverse下对齐下面所有属性都受主轴影响)
flex-end：右对齐
center： 居中（受主轴影响可能是左右居中，可能是上下居中）
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
space-evenly:项目之间的间隔与项目与边框的间隔都一样大
================================================================

align-items:flex-start | flex-end | center | baseline | stretch;

//属性定义项目在交叉轴上如何对齐。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。(同受主轴影响，交叉轴也不一样，主轴是水平的时候，交叉就是垂直的，主轴是垂直那交叉就是水平的，这个属性是按交叉轴来排列的)
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
================================================================

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

//属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用(但当项目只有一根轴线时当你把flex-wrap设为可换行时align-content是起效的，只有当你设为nowrap的时候align-content才不能使用,所以我想当你确定不换行时我们只用align-items就行，因为它不会出现第二条轴线，相反当我们需要它换行的时候那就用align-content让我们能控制更多的轴线，而不会因为多条轴线导致最终渲染结果不是我们想要的)。
(注：什么是有多根轴线，当一条主轴线上放不下元素换行的时候，那第二行也是一条主轴线，它跟第一行的主轴线不同，我们需要操作两条线，这时我们需要用到它，当使用它的时候align-items失效优先遵从align-content的规则,如果不使用align-content继续使用align-items它只会控制一条轴线无法做到我们预期的效果，)
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

子级元素可加属性

order:0;//属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

那么"order:1"排在第一位"order:2"在第二位

flex-grow

//属性定义项目的占容器的比例，默认为0，即如果存在剩余空间，也不放大。
0为占容器的0%，假如容器内子元素的值都设为相同，那么占比平分。每个值占比为容器宽度/所有子元素flex-grow的值相加，
例：我有4个子元素，每个设值为10，容器宽为400，那么就是400/40那么当前1等份就是10像素
我的子元素的值为10等份那么子元素的宽度为10*10=100像素，当我把其中一个元素的占比设为1，剩下的子元素为10，那么总值为31，400/31=12.9像素。1等份为12.9px.10等份的宽度为129px,假如我给值为1的元素加了width:100PX，那么计算占比就变成了，总容器减去子元素已设的width值，再/总占比等份（400-100）/31 = 9.6px，每个元素的宽为原有width属性+占比等份的宽度，值为1的元素变成了100+9.6px，其它占比10的宽为0+96px。其实宽度浏览器都是保留2位小数我这里只是简写了。(注：子元素的border和margin会影响最后的计算值，在计算时需要包含进去才能得到最终你需要的结果！容器的padding值在box-sizing: border-box;属性影响下也是需要把容器的padding计算进去的)

================================================================

flex-shrink:1;

//属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
例：下面例子中我们设了总容器的宽为500，子元素的宽为150，共4个子元素，子元素的总和超出了容器的宽，此时子元素的宽已经溢出我们的容器了，那么flex-shrink开始执行缩放，缩放的计算方式是按照如下，我们把子元素定为A,B,C,D
我们先知道溢出的宽为100，然后这100需要所有子元素平摊，子元素的flex-shrink总和为10，
100/10 = 10 我们知道了1等份为10PX

A:150-1*10=140
B:150-2*10=130
C:150-3*10=120
D:150-4*10=110

(注：子元素的border和margin会影响最后的计算值，在计算时需要包含进去才能得到最终你需要的结果！容器的padding值在box-sizing: border-box;属性影响下也是需要把容器的padding计算进去的)
(注)

================================================================

flex-basis

属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。当设了flex-basis，flex-grow属性会在flex-basis等于大于容器宽度的时候失效（width也是一样效果）
例：子元素ABCD各设flex-grow:1,容器宽度为100，B加上flex-basis:100PX,本来理想是ABCD各占25px的宽，但是B被加上了flex-basis:100PX，那么flex-grow失效了（这个失效不是不起作用而是它没有宽度给它分配了），flex-basis告诉容器我最少要100PX我独占，剩下的才分给ACD，但是剩下的是0，ACD的宽就是0了，但是当容器的宽度为110的时候，B告诉容器先拿出100给我，其它的咱们兄弟再分，剩下只有10，兄弟4人平分，最后ACD拿到2.5，B拿到102.5,
flex-shrink属性还是正常工作
(注：这个属性是受主轴影响的！！当水平的时候它代表width，当垂直时它代表了height，它的优先级大于width || height，当值不等于auto时width || height的值失效)
================================================================

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值：auto等价于 (1 1 auto) 和 none 等价于(0 0 auto)。
================================================================

align-self:auto | flex-start | flex-end | center | baseline | stretch;

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖容器的align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
（它无法改变align-content属性，假如容器用的是align-content，那么align-self没有任何作用）
================================================================