flex布局

6个容器属性

1. flex-direction（决定item的排列方向）：

• row（水平方向，自左向右排列）
• row-reverse（水平方向，自右向左排列）
• column (垂直方向，自上向下排列)
• column-reverse(垂直方向，自下至上排列)

2. flex-wrap（如果一条线排列不下，是否换行，如何换行）：

• nowarp(默认，不换行)
• warp(换行，第一行在最上方，自上至下排列)
• warp-reserve(换行，第一行在最下方，自下至上排列)

3. flex-flow（flex-direction和flex-wrap的简写形式）:<flex-direction><flex-warp>
4. justify-content(在主轴【水平】）上的对齐方式)：

• flex-start（默认，左对齐）
• flex-end （右对齐）
• center（居中）
• space-between（两端对齐，item之间的间隔相等）
• space-around（两端对齐，相当于每个item有相同的margin，所以两个item之间的间隔是item与父盒子边框距离的两倍）

5. align-items（在交叉轴【垂直方向】上的对齐方式）：

• streth(默认，如果item未设置高度，将占满整个容器)
• flex-start(顶端对齐)
• flex-end(底端对齐)
• center(中间对齐)
• baseline(第一行文字的基线对齐)

6. align-content：

• strech(默认，每行高度均分，占满行高)
• flex-start(顶部对齐)
• flex-end(底部对齐)
• center(垂直中间对齐)
• space-between(垂直方向两端对齐，每行间隔相等)
• space-around(每两行的之间的间隔相等，行与行之间的间隔是行与边框的两倍)

6个item属性

1. order:<integer>（默认为0，数字越小，越靠前排）
2. flex-grow（主轴空间充足时，item的放大比例）:<number>(默认为0)
3. flex-shrink(主轴空间不足时，item的缩小比例)：<number>(默认为1)
4. flex-basis
   (item占据水平方向的长度，可写作例如350px，以此计算主轴空间是否充足)：
   <integer>
   (默认为auto，即元素本身的大小)
5. flex
   flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，后两个属性可选。
6. align-self
   (允许单个item有与其他item不一样的对齐方式):
   auto | flex-start | flex-end | center |baseline | stretch
   (默认值为auto，表示继承父元素的align-items属性。如果没有父元素，则等同于stretch)