（学习经验：什么是系统的学习，让别人问你一个问题，即使往深里问，都不怕。就是把他所有的细节都了解到。你必须知道该布局里所有的属性。）

#####注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

⚠️ 注意：【容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。】

###容器的属性

* flex-direction 决定主轴的方向（即项目的排列方向）

* flex-wrap 如果一条轴线排不下，如何换行。

* flex-flow 该属性是flex-direction+flex-wrap的缩写，秉承上面两个属性的默认值

* justify-content 项目在主轴上的对齐方式。

* align-items 项目在交叉轴上的对齐方式。

* align-content 定义了多根轴线的对齐方式

###项目的属性

* order 项目的排列顺序

* flex-grow 定义属性的放大比例。default：0

如果所有项目属性是1，有一个项目属性是2，那么属性是1的等比缩放，而属性为2的模块，是其他的2倍

* flex-shrink 定义属性的缩小比例。default：1

如果所有项目属性是1，当空间不足会等比缩小。有一个项目属性是0，那么属性是1的等比缩小时，而属性为0的模块，不变。

* flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。计算主轴是否有多余空间。它的默认值为auto

* flex=flex-grow+flex-shrink+flex-basis （0 1 auto）

```

flex:none => 0 0 auto

flex:auto => 1 1 auto

flex:1 =>1 1 0%

```

* align-self 属性允许单个项目有与其他项目不一样的对齐方式。可覆盖align-items属性。默认值为auto

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

骰子布局

<div class="box">

<span class="item"></span>

</div>

注释均为.box 的css代码

---

---

网格布局

基本网格布局:所有小盒子1：1：1

.box{

display：flex

}

.span{

flex:1

}

百分比布局

.box{

display：flex

}

.span{

flex:1

}

特殊的span，可以设置flex：0 0 30%

【参考资料】：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html