flex布局简记

 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