flex布局

• 参考文档
  (Flex 布局教程：语法篇){http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html}
• 容器的属性

1. flex-direction决定主轴的方向。

.box{
flex-direction: row | row-reverse | column |column-reverse;
}

2. flex-wrap定义如果一条轴线排列不下，如何换行。

.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}

3. justify-content定义项目在主轴上的对齐方式。

.box{
justify-content: flex-start | flex-end | center | space-between | space-around;
}

4. align-items定了项目在交叉轴上的对齐方式。

.box{
  align-items: flex-start | flex-end | center stretch | baseline;
}

5. align-content定义了多根轴线的对齐方式。

.box{
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

• 项目的属性

1. order定义项目的排列顺序,数值越小，排列越靠前。

.item{
order: <integer>;
  }

2. align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

.item{
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

• 备注：还有其他的属性因为不常用所以没有写出来，可以看链接里更全。