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-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;
定义多根轴线的对齐方式

三、项目属性

**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）

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

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