这里灰色背景区域为container，container内边距宽都是500px, item的宽都是200px,图中标出的是计算后的值;

右侧角标表示这是container的属性还是item的属性

display: flex | inline-flex;

display: flex;
container横向占满父容器，宽度为父容器内边距宽度
200px
200px
display: flex;
container横向占满父容器，宽度为父容器内边距宽度，
item总宽度超出等比例缩小（flex-shrink都为默认值1）
166.67px
166.67px
166.67px
display: inline-flex;
container宽度为子元素宽度
200px
200px
display: inline-flex;
container宽度为子元素宽度,宽度够宽时container会超出父容器
200px
200px
200px

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

display: flex;
flex-direction:row;(默认)
display: flex;
flex-direction:row-reverse;
display: flex;
flex-direction:column;
display: flex;
flex-direction:row-reverse;

flex-wrap: nowrap | wrap | wrap-reverse

display: flex;
flex-wrap: nowrap;(默认)
display: flex;
flex-wrap: wrap 超过往正方向折行
display: flex;
flex-wrap: wrap-reverse 超过往反方向折行

flex-flow: flex-direction flex-wrap

display: flex;
flex-flow: column wrap; 沿侧轴排列，超过沿正方向折列
display: flex;
flex-flow: column wrap-reverse; 沿侧轴排列，超过沿主轴反方向折列
display: flex;
flex-flow: column-reverse wrap;
沿侧轴反方向排列，超过沿主轴正方向折列
display: flex;
flex-flow: column-reverse wrap-reverse;
沿侧轴反方向排列，超过沿主轴反方向折列

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

display: flex;
justify-content: flex-start; 默认值 item整体靠主轴起点
display: flex;
justify-content: flex-end; item整体靠主轴终点
display: flex;
justify-content: center; item整体主轴上居中
display: flex;
justify-content: space-between; 两端对齐，item之间(between)间隔相等
display: flex;
justify-content: space-around;
每个item两侧(around)留有相同距离，item之间间隔比item距边框距离大一倍
display: flex;
flex-direction:column;
justify-content: space-around; 沿侧轴排列的效果

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

display: flex;
align-items: flex-start; item整体靠侧轴起点
display: flex;
align-items: flex-end;item整体靠侧轴终点
display: flex;
align-items: center; item整体居侧轴中心
display: flex;
align-items: baseline; 每个item第一行文字基线对齐
第1行文字
每个item第一行文字基线对齐每个item第一行文字基线对齐
第1行文字
display: flex;
align-items: stretch;
item未设置height或height为auto，则占满(stretch)container高度
display: flex; flex-direction: column;
align-items: stretch;
item未设置width或width为auto，则占满(stretch)container宽度

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

display: flex; flex-wrap: wrap;
align-content: flex-start;
1
2
3
4
display: flex; flex-wrap: wrap;
align-items: flex-start; align-items与align-content区别
1
2
3
4
display: flex; flex-wrap: wrap;
align-content: flex-end;
1
2
3
4
display: flex; flex-wrap: wrap;
align-items: flex-end;align-items与align-content区别
1
2
3
4
display: flex; flex-wrap: wrap;
align-content: center;
1
2
3
4
display: flex; flex-wrap: wrap;
align-items: center;align-items与align-content区别
1
2
3
4
display: flex; flex-wrap: wrap;
align-content: stretch;默认值
1
2
3
4
display: flex; flex-wrap: wrap;
align-items: stretch;align-items与align-content区别
1
2
3
4
display: flex; flex-wrap: wrap;
align-content: space-between;
1
2
3
4
5
6
display: flex; flex-wrap: wrap;
align-content: space-around;
1
2
3
4
5
6

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

定义item自身沿侧轴方向的位置，覆盖container的align-items属性
auto
flex-start
flex-end
center
baseline
stretch
[container] align-items: center;
auto
flex-start
flex-end
center
baseline
stretch

order

原始顺序,默认值为0。相同order按原始顺序
1
2
3
4
使用order后，order越小越靠前
1 | order: 3
2 | order: 2
3 | order: 1
4 | order: 3

flex-grow
按比例分配剩余空间，没有剩余空间时flex-grow无效

设置item的增长因数,默认为0,即如果存在剩余空间也不放大
container宽500，每个item宽200，剩余空间100px，按flex-grow的比例2:3分配即40px和60px
flex-grow: 2; width: 200 + 40 = 240px
flex-grow: 3; width: 200 + 60 = 260px
container宽500，每个item宽200，5个item没有剩余空间，每个item平分container宽度，flex-grow:无效
flex-grow: 3
flex-grow: 2
flex-grow: 1
flex-grow: 3
flex-grow: 2
container宽500，item宽分别为200|50|200。中间的item的flex-grow为0或不设置flex-grow，则是原始宽度50px，剩余的空间有450px，按flex-grow比例分配，占比是30:20,所以第一个230,第三个220
flex: 3
50px
flex: 2

flex-shrink
每个item按比例缩小，使总缩小空间为不足的空间，空间足够时flex-shrink无效

设置item的收缩因数,默认为1,空间不足时平分不足的空间
flex-shrink为0时不缩小
150px
flex-shrink:0; 200px
150px
有剩余空间时，不需要收缩，flex-shrink无效
flex-shrink:2
flex-shrink:3
container宽500px,每个item200px,空间不足，缺少(200 * 3 - 500) = 100px
各item按flex-shrink属性值的比例缩小8:1:1，依次缩小的px是80、10、10，使总缩小为不足的空间100px
flex-shrink: 8; 120px
flex-shrink: 1; 190px;
flex-shrink: 1; 190px

flex-basis
设置伸缩基准值,auto就是原始尺寸的大小（注意：flex-shrink默认为1，空间不足时默认会收缩）

空间足够时，flex-basis相当于width或height(沿侧轴排列)
flex-basis: 100px
空间不足时，按照flex-basis设置的值与根据flex-basis设置的值计算出的item本身总宽度的比例来分配在container中的宽度
第1个item宽400(flex-basis设置),第2个宽200，总共需要600，但container只有500，
flex-basis设置为400px的item 应占空间的400/(400+200)=2/3，宽度为 500 * 2/3 = 333.33
flex-basis: 400px; 333.33px
166.67px
第一个item设置flex-basis:100px,总长 100 + 200 + 200 = 500，第一个item的宽为100px,剩余两项宽度正好
flex-basis:100px
第一个item设置flex-basis:300px,总长 300 + 200 + 200 = 700，占总长3/7
但container只有500，第一个item也应该占container的3/7,所以它的宽是500 * 3/7 = 214.28px
剩余500-214.28 = 285.72px需要放置第2个item和第三个item总共400px,so这两个得缩小400-285.72=114.28,每个item等比例缩小114.28/2=57.14
so第2个item和第3个item宽都为200-57.14=142.86px
flex-basis: 300px; 214.28px
142.86px
142.86px

flex
设置伸缩基准值，flex-grow、flex-shrink、flex-basis的简写，默认值为0,1,auto

空间足够时的默认情况，不分配剩余空间
空间不足时的默认情况，等比例缩小
flex: 1 1 auto, 可简写成flex:1
flex:1; 300px
200px
flex: 0 0 auto, 可简写成flex:none，空间不足时不收缩保持原始尺寸
flex: none; 200px
150px
150px