移动web flex布局

1-移动端和PC端网页不同点

1、PC屏幕大，网页固定版心

​ 2、手机屏幕小，网页宽度多数为100%

• 移动端特点

屏幕尺寸： 指的是屏幕对角线的长度，一般用英寸来度量

• 分辨率

1.物理分辨率是生产屏幕时就固定的，它是不可被改变的 2.逻辑分辨率是由软件（驱动）决定的

• 视口

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

1. viewport：视口
2. width=device-width：视口宽度 = 设备宽度
3. initial-scale=1.0：缩放1倍（不缩放）
4. 

• 百分比布局

目的：能够使用百分比布局开发网页

1. 百分比布局， 也叫流式布局
2. 效果： 宽度自适应，高度固定

2-flex布局

目的： 能够使用Flex布局模型灵活、快速的开发网页

flex布局/弹性布局：

1、是一种浏览器提倡的布局模型

2、布局网页更简单、灵活

​ 3、 避免浮动脱标的问题

flex 布局模型构成

作用：

1、基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生

2、Flex布局非常适合结构化布局

设置方式：

父元素添加 display：flex ，子元素可以自动的挤压或拉伸

组成部分：

1.弹性容器 2. 弹性盒子 3. 主轴 4. 侧轴 / 交叉轴

主轴对齐方式

目的：使用 justify-content 调节元素在主轴的对齐方式

因为在网页中，盒子之间有距离

所以在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距

3-主轴对齐方式属性：justify-content;

属性值有：1~6点

**1.左对齐：****justify-content:flex-start;

2.右对齐： justify-content: flex-end;

3.居中对齐：justify-content:center;

4.先两侧对齐，间隔存放：justify-content:space-between; (简写：sb)

图示：

5.间隔存放-两侧空间小于中间：justify-content:space-around; (简写：sd)

图示：

6.绝对平均: justify-content:space-evenly; (简写：sv)

图示：

3-1 flex使用：1~5点

父元素为 父项 子元素为 子项

1.设置 div 变成 flex 盒子 称之为 弹性布局

​ display:flex;

​

​ 2.div 中的子元素会发生一些改变

​ 1 设置了flex 的盒子 称之为 父项

​ 2 盒子里面的子元素 称之为 子项

​ 1 不再区分 块级、行内元素和行内块元素 全部都可以设置宽高

​ 2 子项 默认的宽度和高度

​ 宽度 由内容撑开

​ 高度 等于父项的高

​ 4. 子项

​ 使用 浮动没有效果 无效

​ 使用 定位、margin、transform都有效的(很少使用，传统布局方式)

​ 5.默认情况下 子项总宽度大于 父项的宽

​ 也不会换行！！！ flex 不会换行

​ 只会压缩自身的宽度而已

代码示例：

3-2

4-（单行）侧轴对齐方式：align-itens;

属性值有：1~3点

1. 侧轴水平居中： align-items:center;

2. 侧轴上对齐： align-items:flex-start;

3. 侧轴下对齐： align-items:flex-end;

4. 

5-（多行）侧轴对齐方式：align-content;

属性值有：1~6点

1.上对齐：align-content:flex-start;

2.下对齐： align-content: flex-end;

3.居中对齐：align-content:center;

4.先上下两侧对齐，间隔存放：align-content:space-between; (简写：sb)

5.间隔存放-上下两侧空间小于中间：align-content:space-around; (简写：sd)

**6.绝对平均: align-content:space-evenly; **

6-换行：flex-wrap:wrap;

注意：换行和 flex：1（子元素均分父元素的宽度）；不能同时使用

• 默认情况下 flex 不会换行的
• 当子元素的总宽度大于父元素的时候 把不会换行，只会挤压子元素的宽度
• 设置 换行属性：flex-wrap
• nowrap 默认属性 不换行
• wrap 换行

7-设置主轴方向：flex-directon：column；

设置修改主轴

​ 修改主轴方向属性：flex-directon

​ 1 row 默认值 水平方向 从左到右 少用

​ 2 row-reverse 从右到左 少用

​ 3 column 从上到下 常用

​ 4 column-reverse 从下到上 少用

​ 默认 flex 盒子值：

​ 子项 默认的宽度会有 内容 撑开

​ 默认高度会继承父项的高度

​ flex:1; 设置 子项每个盒子平分父项的宽度

​ align-seft 设置 子项在侧轴上的对齐

修改主轴后：

​ 改变主轴方向值后，

​ 子项的宽度就会继承父项的宽度

​ 默认高度就有内容撑开

​ align-seft 设置 子项在侧轴上的对齐（水平）

​

8-设置子项均分父项的宽度：在子项中加 flex:1;

8-1 设置子项在自己侧轴上的对齐方式：align- self;

属性值有：1~3点

1. (上对齐) ：align-self:flex-start ;
2. (下对齐) ：align-self:flex-end ;
3. (居中对齐) ：align-self:center ;

9-flex 布局体验

10-总结：