移动端的Flex布局（弹性布局）

Qone
896 阅读7分钟

在做移动端Flex布局前我们需要了解什么？

移动端和PC端的不同

①移动端： 在现在愈来愈发达的智能时代，大部分人接触移动端的时间要比PC端的多，作为移动端，我们在开发中要注意的是手机屏幕小，网页宽度多数为100%，开发内容要适配手机屏幕宽度。另外移动端基本不需要考虑兼容性问题，放心大胆的使用CSS新特性。

②PC端： 作为目前几乎遍布任何行业的PC端，它的特点就在于屏幕大，网页都有固定的版心，并且浏览器繁多，更多的要考虑兼容性问题。布局方式也是灵活改变，有浮动+定位+标准流。

物理分辨率和逻辑分辨率

  1. 物理分辨率：硬件所支持的，屏幕出厂就设定无法修改。
  2. 逻辑分辨率：软件可以达到的， 我们开发中写的是逻辑分辨率。

视口（viewport）

视口（viewport）就是浏览器显示页面内容的“屏幕区域”。

视口的分类：

1.布局视口 。 iOS, Android基本都将这个视口分辨率设置为980px。

image.png

2.视觉视口。用户正在看到的网站的区域。

image.png

3.理想视口。 设备有多宽，我的网页就显示有多宽。

image.png

视口标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

  • width=device-width：视口宽度=设备宽度
  • initial-scale=1.0：初始页面缩放倍数
  • maximum-scale=1.0 最大缩放倍数
  • user-scalable=0 不允许用户缩放页面（移动端） 或者为 no 如果为 yes 则允许用户缩放

其实视口标签在我们创建基本的html框架的时候早就用上了，有了视口标签，可以达到我们想要的理想视口。

二倍图

了解完视口，还有另外一个很重要的知识点，也是我们在移动端开发中需要时时刻刻注意到的点，那就是二倍图，它很好理解，但是却不可疏忽。其实在实际开发中还有三倍图甚至四倍图等多倍图，但是市场还是二倍图偏多。简单理解，二倍图存在就是为了让页面中的图片更加清晰，咱们只需要在开发中严格遵循即可。

1.网页美工的设计稿基本都是750px。2.我们前端工程师拿到设计稿利用一些软件缩小至原图的2倍，再安装缩小后的尺寸开发即可。在这儿推荐使用像素大厨（PxCook），他长这个样子

image.png

当然如果你能使用其他的软件例如Photoshop也是可以的，只要咱们最后的目的达到了就行了。

image.png

移动端Flex布局

当我第一次接触Flex布局（弹性布局）的时候，对于我这个小白来说无疑是打开了新世界的大门，它尽然只需要屈指可数的几行代码便可以完成我们想要的布局。

image.png

众所周知，前端工程师要接触的除了一行行代码，最离不开的就是盒子这个概念了，最头疼的也是如何让他们听话按照设计稿来站对位置，所以要让盒子们听话，我们只需要在各个子盒子的父盒子（亲爸爸）加上 display: flex；重要的事情说三遍：一定要给亲爸爸加！一定要给亲爸爸加！一定要给亲爸爸加！

那么加了这个属性之后，我们还要确定这个爸爸的儿子们的对齐方式，下面我们再来了解下专属于Flex布局的主轴对齐方式和侧轴对齐方式，了解了这些我们就可以更加轻松的布局我们的盒子啦！

主轴对齐方式

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

记住我标红的就行了，如果非要问我那个常用，我只能说是 space-between，下面我们来看看这些对齐方式的显示效果；

justify-content: space-between;     （显示效果：**两侧没缝隙**）

image.png

justify-content: space-around;     （效果如下： **记住子盒子之间的缝隙宽度是最两侧的缝隙宽度的2倍**）

image.png

justify-content: space-evenly;  (盒子与盒子之间缝隙宽度以及边缘缝隙宽度都一样宽)

image.png

justify-content: center;  （经常用于让一个盒子水平居中）

image.png

英语基础不是很扎实的伙伴们也不用怕，咱们记住这几句口诀，但是个人觉得用的多了自然而然就记住了：

  1. 两侧没缝隙是 between
  2. 缝隙一样大是 evenly
  3. 2倍缝隙是 around

以上就是主轴对其方式，接下来咱们讲讲侧轴对齐方式；

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

一样的，咱们重点记住center ，可以让元素垂直居中。

align-items: center;

结合上面我们讲到的主轴对齐方式中的 justify-content: center; 我们可以通过flex让一个子盒子水平和垂直居中。

image.png

咱们来看看完整的代码结构：

.father {
    width: 500px;
    height: 500px;
    background-color: pink;
    /* 设置为flex布局 */
    display: flex;
    /* 主轴水平居中 */
    justify-content: center;
    /* 侧轴垂直居中 */
    align-items: center;
}

.son {
    width: 200px;
    height: 200px;
    background-color: purple;
}

怎么样，是不是特别简单？接下来我们再来了解另外一个flex布局中的另一个特别好用的属性，伸缩比

伸缩比 简而言之，就是把父盒子的宽或者高分为若干分，公平的分给每个子盒子，让他们不吵架。当然与主轴、侧轴对齐方式不同的是，该属性是加给子盒子，明确告诉不听话的儿子们要服从爸爸的话。我们来看看实际的运用中的效果吧。

语法：

flex: 1;（属性值1就是你想让子盒子平均分的份数）

比如有一个父盒子里面有三个子盒子，每个子盒子写 flex：1； 此时每个子盒子各占三分之一。


以下是html结构
<div class="father">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

以下是css结构
.father {
    display: flex;（一定要给父盒子加flex，告诉他我们要用弹性布局了）
    height: 300px;
    background-color: pink;
}

.father div {
    /* 每个孩子各占1份 */
    flex: 1;
    /* 默认子盒子和父亲一样高 */
    background: purple;
}

显示效果如下：

image.png

  1. 一定要给子盒子添加flex：1。
  2. 子盒子默认高度会和父盒子一样高。（前提是不给高度）。
  3. 注意：中间flex: 1; 和 width 有冲突。 优先执行 flex：1；

下面要讲的就是flex布局中最受广泛应用的圣杯布局，顾名思义就是会随着视口大小变动的杯口，和不受影响有固定宽高的杯耳。

image.png

这么说可能还不够实际，那么我们可以去看看京东的首页搜索栏：

image.png 中间的搜索栏就是杯口，会随着视口的大小变动来灵活改变自己的宽度。

核心思路：

  • 两侧盒子写固定大小
  • 中间盒子 flex: 1; 占满剩余空间

小结

  1. 在flex眼中，标签不再分类。

    • 简单说就是没有块级元素，行内元素和行内块元素
    • 任何一个元素都可以直接给宽度和高度一行显示

  2. Flex不存在脱标的情况：也就是基本淘汰了浮动，更不用清除浮动

  3. 当然存在兼容性问题，如果不考虑兼容性可以大量使用，如果是移动端则不用考虑直接flex.

好了今天的分享和记录就到这儿了，我是Qone，一个前端摸索路上的追梦者。

avatar
文章
阅读
粉丝