Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"，容器默认两跟轴，水平的主轴和垂直的交叉轴（即X和Y轴）；容器成员作为flex item(项目)
容器总共有6个属性设置
1、flex-direction ( 决定排列方向， 一共4个 )
flex-direction: row | row-reverse | column | column-reverse; // row为X轴
2、flex-wrap (决定超出换行问题)
flex-wrap: nowrap | wrap | wrap-reverse; // 不换行、第一行在上方，第一行在下方
3、flex-flow (前两个的合并，简写)
flex-flow: row nowarp
4、justify-content (主轴上的对齐方式)
justify-content: flex-start | flex-end | center | space-between | space-around
// 左对齐 、右对齐、居中、两端对齐有同间距、平均有间隔
5、align-items (纵轴对齐方式)
align-items: flex-start | flex-end | center | baseline | stretch
// 上起点对齐、下起点对齐、中点对齐、第一行文字基线对齐、占满高度
6、align-content(多轴线的对齐方式、这里针对纵向轴线，要多轴线才有效)
align-content: flex-start | flex-end | center | space-between | space-around | stretch
// 上起点对齐、下起点对齐、中点对齐、上下两端对齐中间轴线有间隔、每个轴线两侧有间隔均匀对齐
flex item 作为容器子元素有6个属性设置
1、order (Number | 排列顺序, 值越小越靠前)
2、flex-grow (Number | 放大比例 | 默认0,0不放大)
3、flex-sharink (Number | 缩小比例| 默认1，0不缩小 )
4、flex-basis （和宽高一样占据固定空间）
5、flex (flex-grow flex-sharink flex-basis的简写)
flex: 0 1 auto
6、align-self (设置单个item与其他不一样的对齐方式)
align-self: auto | flex-start | flex-end | baseline | stretch
