一、视口
目标：使用meta标签设置视口宽度，制作适配不同设备宽度的网页 1.目标：网页宽度和设备宽度(分辨率)相同。 2.解决办法：添加视口标签。 3. 视口：显示HTML网页的区域，用来约束HTML尺寸。
例子 ：
- viewport：视口2. width=device-width：视口宽度 = 设备宽度
- initial-scale=1.0：缩放1倍（不缩放）
二、Flex布局
使用flex-direction改变元素排列方向
1.主轴方向
主轴默认是水平方向, 侧轴默认是垂直方向 修改主轴方向属性: flex-direction 属性值 作用 row 行, 水平(默认值) column 列, 垂直 row-reverse 行, 从右向左 column-reverse 列, 从下向上
2.弹性盒子换行
：使用flex-wrap实现弹性盒子多行排列效果 弹性盒子换行显示 : flex-wrap: wrap; 2. 调整行对齐方式 ：align-content 取值与justify-content基本相同 控制多行的侧轴对齐方式 align-content属性出现是有前提条件的：必须要先设置flex-wrap: wrap; 控制单行的侧轴排列方式 align-items flex-start flex-end center sh
