Flex布局

阶段目标：使用字体图标，动画等C3属性丰富网页效果和呈现方式，能够开发移动端网页

CSS3：使用平面、空间转换和动画属性，丰富网页元素呈现方式和效果

Flex：了解移动端与PC端屏幕和网页布局差异，使用Flex布局模型实现网页布局

移动适配：能够实现视口宽度不同时，网页元素宽高等比缩放效果

响应式：了解响应式网页特点，能够使用bootstrap框架开发响应式网页

一、移动端特点

1. 移动端和PC端网页的不同点

• PC端屏幕大，网页固定版心
• 手机屏幕小，网页宽度多为100%

2. 谷歌模拟器

F12

3. 分辨率

• PC分辨率

1920 * 1080

1366 * 768

• 缩放150%

（1920/150%）*（1080/150%）

硬件分辨率（出厂设置）

缩放调节的分辨率（软件设置）

制作网页时参考的是逻辑分辨率

4. 视口

使用meta标签设置视口宽度，制作适配不同设备宽度的网页

<meta name="viewport" content="width=device-width, initial-scale=1.0">

作用：实现设备和网页宽度一致

5. 二倍图

图片分辨率，为了高分辨率下图片不会模糊失真

• 参考iPhone6/7/8，设备宽度375px产出设计稿

• 二倍图设计稿尺寸：750px

二、百分比布局

也叫流式布局，也称非固定像素布局，是移动Web开发比较常见的布局方式。

通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充。

宽度自适应，高度固定

三、Flex布局

1. Flex布局/弹性布局

• 是一种浏览器提倡的布局模型
• 布局网页更简单、灵活
• 避免浮动脱标的问题

2. Flex布局模型构成

• 作用：
  • 基于Flex精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生
  • Flex布局非常适合结构化布局
• 设置方式
  • 父元素添加==display：flex==，子元素可以自动的挤压或拉伸
• 组成部分
  • 弹性容器
  • 弹性盒子
  • 主轴
  • 侧轴/交叉轴

3. 主轴对齐方式

修改主轴对齐方式属性：justify-content

属性值	作用
flex-start	默认值，起点开始依次排列
flex-end	终点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

            display: flex;
            /* 居中 */
            justify-content: center;
            /* 间距在弹性盒子（子级）之间 */
            justify-content: space-between;
            /* 所有地方的间距都相等 */
            justify-content: space-evenly;
            /* 间距加在子级的两侧 */
            /* 视觉效果：子级之间的距离是父级两头距离的2倍 */
            justify-content: space-around;

4. 侧轴对齐方式

修改侧轴对齐方式属性：

• align-items（添加到弹性容器）
• align-self：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

属性值	作用
flex-start	默认值，起点开始依次排列
flex-end	终点开始依次排列
center	沿侧轴居中排列
stretch	默认值，弹性盒子沿着主轴线被拉伸至铺满容器

5. 主轴方向

属性值	作用
row	行，水平（默认值）
column	* 列，垂直
row-reverse	行，从右向左
column-reverse	列，从下向上

            display: flex;
            /* 1. 先确定主轴方向；2. 再选择对应的属性实现主轴或侧轴的对齐方式 */

            /* 修改主轴的方向：列 */
            flex-direction: column;
            /* 视觉效果：实现盒子水平居中 */
            align-items: center;
            /* 视觉效果：实现盒子垂直居中 */
            justify-content: center;

6. 弹性盒子换行

            display: flex;
            /* 默认值：不换行 */
            flex-wrap: nowrap;

            /* 弹性盒子换行 */
            flex-wrap: wrap;

            /* 调节行的对齐方式 */
            align-content: center;
            align-content: space-around;
            align-content: space-between;