初学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属性的取值类似。