初学HTML5——响应式栅格系统
一.栅格系统：
在网页制作中，栅格系统就是用固定的格子进行网页布局，是一种清晰，工整的设计风格
二.弹性盒布局：
- 弹性盒分为容器，子元素，轴（横轴，纵轴）
- 弹性盒改进了块模块，既不使用浮动，也不会在弹性盒容器与其内容之间合并外边距，是一种非常灵活的布局方法。
1.display
display用于指定弹性盒的容器，其值可以为flex；如果为行内元素，值为inline-flex.
2.flex-flow
flex-flow是属性flex-direction和flex-wrap的简写，用于排列弹性子元素。
-flex-direction
| 取值 | 描述 |
|---|---|
| row | 弹性盒子元素按轴方向顺序排列，默认值 |
| row-reverse | 弹性盒子元素按轴方向逆序排列 |
| column | 弹性盒子元素按纵轴方向顺序排列 |
| column-reverse | 弹性盒子元素按纵轴方向逆序排列 |
flex-wrap
| 取值 | 描述 |
|---|---|
| nowrap | flex容器为单行，该情况下flex子项可能会溢出容器 |
| wrap | 弹性盒子元素按轴方向逆序排列 |
| wrap-reverse | 弹性盒子元素按纵轴方向逆序排列 |
3.justify-content
justify-content属性能够设置子元素如何在当前轴方向的排列，取值如小表所示：
| 取值 | 描述 |
|---|---|
| flex-start | 弹性盒子元素将向行起始位置对齐 |
| flex-end | 弹性盒子元素将向行结束位置对齐 |
| center | 弹性盒子元素按将向行中间位置对齐 |
| space-between | 弹性盒子元素会平均地分布在行里 |
| space-around | 弹性盒子元素会平均地分布在行里 |
4.align-items
align-items属性用于设置子元素在垂直于轴的方向上的排列，其取值如下表所示：
| 取值 | 描述 |
|---|---|
| flex-start | 弹性盒子元素向垂直于轴的方向上的起始位置对齐 |
| flex-end | 弹性盒子元素向垂直于轴的方向上的结束位置对齐 |
| center | 弹性盒子元素向垂直于轴的方向上的中间位置对齐 |
| baseline | 如弹性盒子元素的行内轴与侧轴为同一条，则该值与‘flex-star’等效。其他情况下，该值将参与基线对齐 |
| stretch | 如果指定侧轴大学的属性值为“auto”，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照“min/max-width/height”属性的限制 |
5.order
order属性用于设置子元素出现的顺序,取值为1,2,3…
6.flex
flex属性是flex-grow（扩展比率），flex-shrink（收缩比率）和flex-basis（宽度，像素值）的缩写，能够设置子元素的伸缩性。
7.align-self
align-self属性能够覆盖容器中的align-items属性，用于设置单独的子元素如何沿着纵轴排列
其取值有auto|flex-star|flex-end|center|baseline|stretch,每个值的意义与align-items属性的取值类似。