flex0.0.0.

flex-container：开启flex布局的容器
flex item：里面的元素

主轴main axis：默认横着的
交叉轴（辅轴）cross axis：竖着的向下

开启：

设置flex-container开启flex的方式
display:flex:
/*
让flex容器变成一个块元素还是行内元素
flex块元素
inline-flex行内元素
*/

1.flex-direction：决定主轴的方向
row默认值行 row-reverse
column列 column-reserve
2.justify-content：决定flex item在主轴上的对齐方式
flex-start默认值，主轴的开始位置
flex-end 主轴的结束位置开始
center：居中对齐
space-between：贴边 平分中间
space-evenly：平均分布
space-around：贴边的宽度是元素间宽度的一半
3.align-items：决定了flex item在交叉轴上的对齐方式
normal默认 效果跟stretch一样
stretch：如果flex-items 在交叉轴的方向的size为auto（没设置height），自动拉伸至填充flex container
flex-start：顶部对齐
flex-end：底部对齐
center：居中对齐
baseline：基线对齐（基线：字母x的底部）

默认情况下，flex items都会在同一行显示，放不下时会收缩

4.flex-wrap
nowrap：默认不换行
warp：换行
warp-reserve
5.flex-flow：flex-direction 和 flex-wrap 的缩写属性，顺序不限
6.aline-content：决定多行的flex-items在交叉轴上的对齐方式

flex-item的属性

order-by：决定items的排序
默认值0，可以设置任意整数，值越小越靠前
aline-self：单独决定这个item的对齐方式，覆盖容器的aline-items
flex-grow：决定items如何扩展
默认值0
如果各个元素的值之和大于1，则对齐按设置的值按比例分配
元素的值之和不大于1，则将剩余的size*flex-grow分配给对应元素
flex-shrink：决定items如何收缩
默认值1
flex-basis：主轴上item的size，优先级高于width、height
flex：flex-grow flex-shrink flex-basis的结合