main axis和cross axis的位置不一定是水平和垂直的，以flex-direction的值即为主轴方向
justify-content:主轴对齐方式
-
space-between:将多余空间放在中间
-
space-around:将多余空间放在两边，和space-between的区别就是最两边会有空间
-
flex-start:都靠齐主轴的首部（main start） -
flex-end:都靠齐主轴的尾部（main end） -
center:全部紧凑居中
align-items：侧轴对齐方式
-
stretch：拉伸至所有flex item中最长的一个的长度（默认值） -
center：居中，个人理解为全部都对齐至主轴 -
flex-start：全部靠齐侧轴首部（cross start） -
flex-end：全部靠齐侧轴尾部（cross end）
align-content：当产生换行时，行与行之间的空隙的分配方式
flex-grow：所有flex item 排完之后同一行还有空间的时候让指定flex item扩大来填充空白部分，值为整数。
flex-shrink：空间不够时指定Flex item缩放比例，值为整数（一般不用）。
flex-basis：指定flex item的默认大小，单位像素（一般不用）。
flex：上面三个属性的合集。
order：修改指定的flex item在主轴上的顺序，值为整数。
align-self：在各flex item高度不一致且在高度不确定的时候，用于单独指定某个Flex item的对齐方式，关于这个属性我的理解是对应flex container中的align-items，align-item是指定所有的flex item的在侧轴的对齐方式，而align-self用于指定某一个的在侧轴的对齐方式
这里只记录了我认为核心属性，比较简单的或者不常用的就不具体讲了，想要详细学习可以参考MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex