Flex布局-----flex布局的详细用法总结

一、基本概念

1. tips：行内元素也可以使用 Flex 布局

.box{
  display: inline-flex;
}

2. 注意：Flex 布局以后，子元素的float、clear和vertical-align属性将失效
3. 概念：
   采用 Flex 布局的元素，称为 Flex 容器，简称"容器"
   它的所有子元素自动成为容器成员，称为 Flex 项目，简称"项目"

二、容器

六个属性：

1. flex-direction: row | row-reverse | column | column-reverse;
设置主轴的方向，及项目的排列方向：从左到右（默认），从上到下，从下到上，从右到左。

2. flex-wrap：nowrap | wrap | wrap-reverse;
由于项目默认都在一条线排列，当排列不下就涉及换行问题，该属性规定换行规则：不换行，换到下一行，换到上一行

3. flex-flow: flex-direction || flex-wrap;
前两者的简写

4. justify-content：flex-start | flex-end | center | space-between | space-around | space-evenly
定义项目在主轴的对齐方式：靠近起点，靠近终点，居中，
中间留白，两侧中间都留白

注意：
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

理解：就是定义蓝方块再红线上的排列方式，想象它是一个羊肉串哈哈。

5. align-items：flex-start | flex-end | center | baseline | stretch;
交叉轴的对齐方式：

6. align-content： flex-start | flex-end | center | space-between | space-around | stretch;
定义多根轴线的对齐方式
理解：此时，项目有了换行，于是想象成有了多个主轴，因此我们就要规定这些主轴的排列方式，于是就有了align-conten属性。控制红线的排列方式，想象成是多个羊肉串在烤架上。

三、项目属性

**1. order：number ，default 0 **

2. flex-grow：
指定项目的放大比列

3. flex-shrink：
指定该项目的缩小比例

4. flex-basis：可以用px单位，如100px
指定项目再分配多余空间的时候，项目占据主轴的空间

5. flex：默认值为0 1 auto
前三者的简写
快捷值小结：

auto   (1 1 auto) 
none   (0 0 auto)
1      (1 1 0%)
1 2    (1 2 0%)

div{
    flex: 1 2; /* 两个非负数 */
}
/* 等同于 */
div{
    flex-grow: 1; /* 第一个非负数 */
    flex-shrink: 2; /* 第二个非负数 */
    flex-basis: 0%; 
}

6. align-self：
允许单个项目有与其他项目不一样的对齐方式

参考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
阮老师的博客写的是真清楚，爱了~~