前端自学笔记5：移动端布局学习

HZWANG30

已于 2023-06-28 21:22:58 修改

阅读量141

点赞数

分类专栏：前端自学笔记文章标签：前端笔记学习

于 2023-05-04 21:35:44 首次发布

本文链接：https://blog.csdn.net/qq_44986029/article/details/130297100

版权

前端自学笔记专栏收录该内容

11 篇文章 1 订阅

订阅专栏

文章目录

1、如何在电脑中调试移动端网页效果：谷歌模拟器

首先，在网页中右击，选择检查；
然后,在弹出的调试框左上角；最后刷新网页。即可查看移动端效果。
在这里插入图片描述

2、移动端分辨率的特点

英寸：指手机对角线的长度；
PC和移动端分辨率：参考逻辑分辨率；
通过自动生成视口标签设置视口宽度，制作适配不同设备宽度的网页。
设置过视口标签后，网页宽度和设备宽度相同，否则设备宽度为980。
一般情况下，网站移动端以二倍图居多（为了高分辨率下图片不会模糊失真）。
移动端以前使用的是百分比布局/流式布局（宽度自适应，高度固定）
目前：移动端使用Flex布局（弹性布局），是一种浏览器提倡的布局模型，更灵活简单，可以避免浮动脱标问题。

3、flex布局模型构成

在这里插入图片描述

设置方式：给上一级父集设置display: flex; 子元素可以自动挤压或拉伸。
父集称为弹性容器，子集称为弹性盒子。
默认主轴为水平方向，侧轴/交叉轴为垂直方向。所以默认弹性容器中的弹性盒子为水平排列。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体验flex布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            display: flex;/*设置flex布局*/
            height: 200px;
            border: 1px solid #000;
        }
        .box div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

设置前效果：
在这里插入图片描述
设置后效果：

4、使用flex布局给盒子设置水平间距：justify-content，调节元素在主轴的对齐方式。

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

flex-strat效果：（默认）
flex-strat效果

center：效果
space-around效果
space-between效果
space-evenly效果

5、使用flex布局给盒子设置垂直间距：align-items（给弹性容器添加）调节元素在侧轴的对齐方式

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

flex-start，stretch默认效果，如果要想stretch设置铺满盒子，是不需要给弹性盒子设置height值的，否则优先显示弹性盒子的height。
flex-end效果

center效果：
align-self，给某个弹性盒子单独设置对齐方式
比如给第2个盒子居中显示：

如果，弹性盒子的对齐方式不是stretch而是其他的，那么盒子的高度是由内容撑开的。
在宽度上也一样效果，如果没有设置宽度，那么由内容撑开。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侧轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            display: flex;
            /* align-items: center ; */
            height: 300px;
            margin: auto;
            border: 1px solid #000;
        }
        .box div {
            width: 100px;
            /* height: 100px; */
            background-color: pink;
        }
        /* 单独设置某个弹性盒子的侧轴对齐方式 */
        .box div:nth-child(2) {
            align-self: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

在这里插入图片描述

6、使用flex修改弹性盒子伸缩比（flex：整数；）

只占用父盒子剩余尺寸的份数（整数代表份数）。
例如：此处定义三个盒子(左右margin20)，不设置宽度，则由内容撑开：
如果给第一个盒子设置flex: 1; （表示除去其他盒子，第一个盒子占剩余的全部）；
效果：

如，给第一个第二个盒子都设置flex: 1; （表示一和二各占剩余的宽度的一份，也就是二等分）
效果：
给三个盒子都设置flex: 1; （表示宽度三等分，三个盒子各占一份）
效果：

7、使用flex-direction改版元素排列方向

flex布局中，弹性盒子默认沿主轴方向排列，可以通过给弹性容器设置flex-direction属性，修改容器的主轴方向来控制盒子的排列方向。
属性的所有取值：

flex-direction属性值	作用
row	默认值，沿行水平排列
column	沿列，垂直排列
row-reverse	沿行，由右向左排列
column-reverse	沿列，从下向上排列

8、弹性盒子的换行

由于flex布局中，弹性盒子的宽度可以弹性伸缩，所以不能通过像浮动一样将多余的盒子挤到下一行显示。使用flex-wrap: wrap;实现弹性盒子的自动换行。默认值为nowrap。
在这里插入图片描述

9、弹性盒子设置行对齐方式：设置align-content属性，属性值与justify-content基本相同。

HZWANG30

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端自学笔记5：移动端布局学习

目前：移动端使用Flex布局（弹性布局），是一种浏览器提倡的布局模型，更灵活简单，可以避免浮动脱标问题。一般情况下，网站移动端以二倍图居多（为了高分辨率下图片不会模糊失真）。设置过视口标签后，网页宽度和设备宽度相同，否则设备宽度为980。即可查看移动端效果。通过自动生成视口标签设置视口宽度，制作适配不同设备宽度的网页。使用的是百分比布局/流式布局（宽度自适应，高度固定）/* 单独设置某个弹性盒子的侧轴对齐方式 */PC和移动端分辨率：参考逻辑分辨率；首先，在网页中右击，选择检查；/*设置flex布局*/
复制链接

扫一扫