移动Web学习之flex布局

flex布局

首先我们要了解一个概念，就是现在一般的移动端开发都用iPhone6-8的机型作为标准像素尺寸，因为随着现在智能手机的像素越来越高，屏幕上的一个物理像素点可能装了几个逻辑像素点

• 做前端开发的时候，默认收到的都是二倍图，为了兼容用户的默认视口宽度，可以在像素大厨里切成一倍图方便调试。
• PC默认视口宽度是980px，添加了视口标签之后就为设备的宽度

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

在201*年左右，手机端为了适应不同的屏幕，通常采用一种现在一种基本不怎么用的到的技术，也就是百分比布局：

百分比布局

---

百分比布局：也叫流式布局
特点：宽度自适应，高度固定

---

现在的手机端基本都用新技术，Flex布局方式，Flex的优势是不脱标，且没有浮动效果的影响，一定程度上的缺点是兼容不了老版本的浏览器

• Flex的布局组成必须由弹性容器，弹性盒子两个部分组成，display:flex是布局的命令，其必须给父盒子设置，子盒子元素排列为主轴，设置flex后，子盒子的高度可以撑开父盒子；且flex布局后盒子的宽高变的有弹性，一些行内元素甚至可以直接设置宽高。
• display:flex的属性会强制把子盒子放到一行（也就是主轴）显示，如果超过了盒子，会压缩子盒子的宽度。

justify-content调节主轴的对齐方式

• 给容器设置

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

align-items调节元素的侧轴对齐方式

• 给容器设置

align-self调节元素在侧轴的对齐方式

• 给盒子设置

属性值	作用
flex-start	默认值，起点开始依次排列
flex-end	终点开始依次排列
center	在侧轴方向上居中
stretch	默认值，弹性盒子沿主轴拉满容器（在子盒子没有高度时）

---

既然Align-self和Align-content以及align-items都为调整侧轴的对齐方式

• 那么他们有什么区别呢？

Align-content是让整个容器盒子（或者说父盒子）设置对齐 只对多行的盒子起作用，对单行的盒子不起任何作用
Align-items是让盒子中的每个单个子相设置对齐
Align-self是允许单个项目和其他项目有不一样的对齐方式

• Flex修改盒子伸缩比
• 给盒子设置

Flex-direction改变元素排列方向

Flex-direction:Column; 把侧轴变成主轴显示，就是把坐标轴右下转45度，这个用的最多，其他的可以查手册

• Flex-wrap: wrap弹性盒子换行排列
• 给容器设置
• 在单行时，可以加给align-content，实现强制多行布局

其他：

移动端按钮高亮解决方案：

a {
-webkit-tap-hignlight-color: transparent;
}