Flex（水平主轴main axis）（垂直交叉轴cross axis）
display flex;【设置flex 子元素浮动就失效了，定位管用】
flex-direction：row;【主轴从从右到左】
flex-direction：row-reverse;【颠倒顺序】
flex-direction：column;【从上到下，变换了主轴】
flex-direction：column-reverse;【颠倒顺序】
flex-wrap：wrap;【换行】
flex-wrap：wrap-reverse;【换行并颠倒顺序】
flex-flow：；【复合属性，设置主轴方向是否换行】
justify-contert：flex-end;【定义项目在主轴上的对齐方式 右对齐】
justify-contert：flex-start;【左对齐】
justify-contert：center;【居中】
justify-contert：space-between;【靠边对齐】
justify-contert：space-around;【子元素左右距离保持一样，但相邻距离是2倍】
justify-contert：space-evenly;【子元素相邻的距离保持一致】
align-items：center;【垂直方向居中】
align-items：flex-start;【垂直方向顶部】
align-items：flex-end;【垂直方向底部】
baseline;【项目的第一行文字的基线对齐】
align-items：baseline；【垂直方向按照子元素的文字所在的位置进行对齐】
align-items：stretch；【不设置高度，会占满】
align-content：center;【+把多列的item在整体的垂直方向上设置位置】
align-items：center;【如果是单个item控制他的垂直方向使用】
flex：grow：1;【默认值为0代表不放大，1代表放大】
flex：basis：200px;【设置后width就不存在了，同级存在时，优先使用它 如果父元素宽不 够，排列不下设置它后，会自动适应 直到占满父元素】
flex：shrink：1;【默认值为1，值越大，按比例缩的就越小】
flex【复合属性】flex：flex：grow；flex：shrink；flex：basis；
↑ ↑ ↑
1 1 auto
