移动Web——弹性布局

最新推荐文章于 2023-05-10 20:31:34 发布

原创最新推荐文章于 2023-05-10 20:31:34 发布 · 565 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html

本文探讨了移动端Web的特点，包括PC与移动端的区别、分辨率的物理与逻辑概念，以及视口在适应不同设备中的作用。重点介绍了flex弹性布局，阐述了其作为浏览器提倡的布局模型，能解决浮动脱标问题，提供更灵活的页面布局。同时，详细讲解了flex布局的设置方式、组成部分，以及主轴和侧轴的对齐方式，包括justify-content和align-start属性的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. 移动端的特点

1. PC端和移动端的区别：

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

2. 分辨率

①物理分辨率：是生产屏幕时固定的，他是不可被改变的。

②逻辑分辨率：由软件驱动决定的。

3. 视口（了解即可，代码会自动生成）

作用：让网页的宽度等于设备宽度，制作配饰不同的设备网页。

*注意：PC端视口默认100%；没视口标签时屏幕默认尺寸是980评选。

<meta name="viewport" content="width=device-width" initial-scale=1.0>
 <!-- 视口标签 -->

viewport表示视口，width=device-width：视口宽度 = 设备宽度，initial-scale=1.0：缩放1倍。

二. flex弹性布局（也叫伸缩布局）

1. 概念：

flex布局（弹性布局）是一种浏览器提倡的布局模型，布局网页更简单、灵活，可避免浮动脱标的问题。

2. 作用：

基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。Flex布局非常适合结构化布局。

3. 设置方式：给父元素添加display：flex；子元素可以自动拉伸或挤压。

4. 组成部分：

弹性容器（添加了display：flex；的盒子）

弹性盒子（添加了display：flex；的盒子里面的子元素）

主轴(横轴) main axis

侧轴（交叉轴）cross axis

5. 主轴对齐方式

属性：justify-content

属性值：

实例演示：父盒子嵌套三个子盒子，宽高为100px，背景色为天蓝色。

<body>
    <div class="father">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    </div>
</body>

当值为center时，居中排，空白分布在弹性容器（父级）两侧。

 .father{
        display: flex;
        justify-content: center;
         }

当值为space-around时，弹性盒子（子级）均匀分布，盒子间空白相等。

 .father{
        display: flex;
        justify-content: space-around;
    }

当值为space-between时，空间均匀分布在弹性盒子（子级）的之间。

.father{
        display: flex;
        justify-content: space-between;
    }

当值为space-evenly时，空白均分在弹性容器和弹性盒子的之间。

.father{
        display: flex;
        justify-content: space-evenly;
    }

6.侧轴对齐方式

属性：align-start：；

属性值：

7. 使用flex-direction改变元素排列方向

flex-direction ：column；将主轴的方向改为垂直方向

*注意：如果主轴方向为垂直方向，那么侧轴就变为水平方向。

8. 使用flex-wrap：wrap；让弹性盒子换行