一、启动flex布局

　　在属性中加入　　display:flex;

二、确定flex布局的主轴

　　flex布局有一条主轴和一条交叉轴，启用此布局默认是水平的主轴main axis。
　　使用flex-direction: ；属性来确定主轴的方向，该属性有以下四个值
　　row　　水平主轴，起点在左端　　　　　||　　row-reverse 主轴为水平方向，起点在右端
　　column 主轴为垂直方向，起点在上方        ||　　column-reverse主轴为垂直方向，起点在下方

三、确定换行属性　　flex-wrap: ;

　　设置了该属性项目就不会等分容器宽度，而是按照自身的宽度进行排列，排不下的时候就换行　　

　　换行也就是一行排不下去了，该属性有三个属性值

　　nowrap不换行
　　wrap换行
　　wrap-reverse换行，向上换行

四、前面两个属性简写flex-flow: ;

　　flex-flow属性是flex-direction属性flex-wrap属性的简写形式

　　默认值为row nowrap

五、确定主轴方向上的对齐方式　　justify-content: ;

　　该属性对应五个值分别为
　　flex-start　　左对齐　　||　　center　　居中　　||　　　flex-end　　右对齐
　　space-around;　　每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
　　space-between;　 两端对齐，项目之间的间隔都相等
　　space-evenly;　　 距离两侧的间距和项目之间的间距相等
　　 

六、确定在交叉轴的对齐属性　　align-items: ;

　　flex-start //（默认）交叉轴的起点对齐

　　flex-end //交叉轴的终点对齐

　　center //交叉轴的中点对齐

　　baseline //项目的第一行文字的基线对齐

=====以上全部是设置在容器上的属性=====

=====以下全部是设置在项目自身属性=====

七、确定项目排序属性　　order: ;

　　属性值0，1，2，3.......该属性值越小排列越靠前

八、确定项目单独排列属性　　align-self: ;

　　属性值center居中、flex-end靠底端对齐

九、确定项目放大、缩小、主轴方向上的列宽

　　flex: flex-grow flex-shrink flex-basise;
　　默认值 0 1 auto 
　　两个快捷键auto(1 1 auto)、none( 0 0 auto)
　　根据设置的grow、shrink值来进行分配大小。
　　若是grow和shrink都是1则进行均分项目剩余空间，若都是0则剩余空间不进行分配
　　由于flex-basise的权重比width、 height的权重要高，所以flex-basise属性会覆盖前面的主轴方向上的列宽