个人理解
display：flex开启弹性布局，这个属性对需要开启弹性布局的父元素设置，设置之后父元素中的子元素浮动会被取消。
开启弹性布局后父元素被称作容器，子元素被称作项目。
设置弹性布局之后，默认主轴为x轴，交叉轴为y轴，可以通过 flex-direction属性进行修改主轴方向，交叉轴也会随之变换
属性1： justify-content设置在主轴的对齐方向，对容器使用，值有
flex-start（默认值从容器里面左往右排列，项目顺序不变） /
flex-end （从容器里面右往左排列，项目顺序不变）/
space-around （项目于项目之间产生相同间隙，项目与容器之间产生间隙，前者的大小是后者的两倍）/
space-evenly（项目于项目之间产生相同间隙，项目与容器之间产生间隙，前者的大小和后者一样） /
space-between（项目于项目之间产生相同间隙，项目与容器之间不产生间隙）
等其它不常用值
属性2：align-items设置在交叉轴的对齐方向，对容器使用，值有
align-items属性值和justify-content基本一致，建议自己探索
属性3：flex-shrink，对项目使用，设置项目是否缩放 ，默认情况下当项目的宽或高相加超越容器的宽高后，项目的大小会进行缩小（直至与项目的内容大小一致）
属性4：flex-wrap，对容器使用，设置容器里面是否会自动换行（warp)，默认情况不会(nowarp),
设置warp后，项目的宽或高相加超越容器的宽高，项目不会缩小，只会进行换行