移动端特点

• 移动端和PC端网页不同点
• 谷歌模拟器
• 分辨率
• 视口
• 二倍图

Flex布局

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

Flex的组成

弹性布局>弹性盒子

添加弹性布局
给父元素添加 display: flex，子元素可以自动的挤压或拉伸
.box {
/* 添加弹性布局 display:flex;df /
/ 弹性容器 display:flex; /
/ 默认的宽度和父元素一样 /
/ 默认高度由内容撑开 */
}

.box div {
/* 弹性盒子:弹性容器的最近一级子元素(亲儿子子元素) /
/ 1.默认宽度由内容撑开 /
/ 默认高度为父元素高度 /
/ 2.弹性盒子没有块级,行内,行内块元素区分,统统都是弹性盒子(可以直接设置宽高,一行显示多个) /
/ 3.弹性盒子默认不换行,宁愿压缩自身宽度都不会换行 */

主轴对齐方式

/* 改变主轴对齐方式 jc ：justify-content */

1.flex-style 默认值，从父元素左边开始
2.flex-end 让弹性盒子整体，显示在弹性容器的右侧
3.center 让弹性盒子整体，显示在弹性容器的中间
4.space-around 让空白空间环绕在弹性盒子的两侧，第一个和最后一个盒子离弹性容器的距离为弹性盒子与弹性盒子之间的距离的1/2
5.space-between 让空白空间分布在弹性盒子与弹性盒子之间，第一个与最后一个弹性盒子离弹性容器的距离为0
6.space-evenly 弹性盒子离弹性容器之间的距离与弹性盒子之间的距离相等

jc主轴对齐方式.png

侧轴对齐方式 ai : align-items

【align-self控制某个弹性盒子在侧轴方向排列（属性值和ai是一样的，）】
1.默认值 flex-start 从起点开始排列
2.flex-end 从终点排列
3.center垂直居中
4.默认值stretch 垂直拉伸：沿着侧轴（垂直）方向拉伸弹性盒子的高度直到父元素一样高(需把弹性盒子高限值去除)

ai侧轴对齐方式.png

伸缩比

伸缩比：flex 给弹性盒子添加
1.所有的弹性盒子都添加相同的flex值,均分弹性容器的宽度；如果flex值不同，根据比例进行分配
2.其他的盒子宽度固定,只有一个盒子设置了flex:1---占据父元素剩余的宽度

案例：

伸缩比案例.png

总结：
弹性容器设置的属性：df,jc,ai
弹性盒子设置的属性：align-self.flex

水平垂直居中使用

display:flex（添加弹性布局）
justify-content:center（水平居中-主轴）
align-items:center（垂直居中-侧轴）