1.display flex;设置布局方式为flex布局，设置后，子元素float就失效了，定位仍然可以用。
2.flex-direction:row 设置主轴方向，默认主轴方向从左到右，不换行，colum，主轴方向从上到下
3.flex-wrap，换行，flex布局默认不换行（nowrap）,项目都排在一条线上
4.justify-content:flex-start,定义了项目在主轴上的对齐方式，左对齐。还有end右对齐，center居中
5.flex布局不像绝对定位，脱离了文档流，flex设置了布局还是会遵守文档流布局：
justify-content:space-between;子元素靠边对齐，两端对齐，项目之间的间隔都相等。
justify-content:space-around;每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
justify-content: space-evenly;子元素相邻的距离保持一致
6.定义在项目交叉轴上的对齐方式
align-items:center:垂直方向居中
align-items:flex-start;垂直方向的顶部，交叉轴的起点对齐
align-items:flex-end;垂直方向的低部，交叉轴的终点对齐
align-items: baseline；垂直方向按照子元素的文字所在的底部不知进行对齐，也就是我脑子的基线对齐
align-items: stretch；默认值，如果项目未设置高度或设为auto，将占满整个容
