响应式布局

display样式：

1、将非块级元素转换为块级元素

     display:block;        占一排，后有内容只能在下面显示

     display:inline-block;       不占一排，内容在后面紧接

2、隐藏标签(不显示）

     display:none;

3、将标签作为弹性伸缩盒显示(把标签变盒子，才能控制内容）

     display:flex;             横向排列，默认

4、排列方式

     flex-direction:row/column        横向/纵向

5、水平对齐方法

    justify-content:flex-start(左对齐)/flex-end(右对齐)/center/space-aroun(分散两侧有空间)/space-                             between;(分散两侧无空间)

6、垂直对齐方式

    align-items:flex-start/flex-end/center;      盒中只有一行对齐方式用

    align-content:flex-start/flex-end/center/space-around/space-between;   盒中有多行时用

7、是否多行显示

    flex-wrap:wrap;

8、占比

    flex-grow:数字;