移动web第三天（flex布局）重点

mc.byte

已于 2022-08-11 08:45:41 修改

阅读量91

点赞数

分类专栏： web前端 # 笔记文章标签：前端 html

于 2022-08-11 00:03:03 首次发布

本文链接：https://blog.csdn.net/m0_58044090/article/details/126273719

版权

web前端同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

笔记

30 篇文章 0 订阅

订阅专栏

1.PC端网页和移动端网页的不同：PC屏幕大，网页固定版心；手机屏幕小，网页宽度多数为100%

2 分辨率：

2.1 pc分辨率：1920 * 1080； 1366 * 768；........

2.2 制作网页参考物理分辨率还是逻辑分辨率？答：逻辑分辨率

2.3 移动端主流设备分辨率

三：视口

// 默认
<meta name="viewport" content="width=device-width, initial-scale=1.0" />  
// 标准  
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

viewport：视口
width=device-width：视口宽度 = 设备宽度
initial-scale=1.0：缩放1倍（不缩放）

目标：使用meta标签设置视口宽度，制作适配不同设备宽度的网页

视口：显示HTML网页的区域，用来约束HTML尺寸。

(主要就是让写移动端网页时html视口宽度=设备宽度；否则不加用meta标签设置视口宽度，默认网页宽度都是980px)

4.百分比布局（流式布局）

效果： 宽度自适应，高度固定。

5. flex布局(弹性布局)

5.1 flex布局原理

flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
flex布局又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项（flex item）或弹性盒子，简称"项"。
**总结**：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
（父元素添加 display: flex，子元素可以自动的挤压或拉伸）

5.2 Flex组成：弹性容器，弹性盒子，主轴，侧轴。

5.3 主轴对齐方式：justify-content ——（添加给容器）

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
space-evenly：项目之间的间隔与项目与边框的间隔相等。

  <style>
            /* 主轴对齐方式(justify-content)：书写在弹性容器（大盒子）内 */
        .box {
            display: flex;
            /* 1、默认取值 */
            justify-content: flex-start;
            justify-content: start;

            /* 2、反向取值 */
            justify-content: flex-end;
            justify-content: end;

            /* 3、均分间距出现在子级的两侧 */
            /* 视觉效果: 子级之间的间距是父级两端间距的二倍 */
            justify-content: space-around;

            /* 4、均分间距出现在子级的之间 */
            /* 视觉效果: 子级之间的间距是均分的 */
            justify-content: space-between;

            /* 5、子与父、子与子的间距都相等 */
            /* 视觉效果： 子级之间的间距与父级两端间距相同 */
            justify-content: space-evenly;

            /* 6、居中排列 */
            justify-content: center;

            height: 200px;
            margin: auto;
            border: 1px solid #000;
        }

        .box div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>

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

5.4侧轴对齐方式

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        /*
            小问题:
            1、侧轴对齐方式的属性名称是什么？       —————  align-items;  align-self
            2、书写位置？                         ——————  弹性容器        弹性盒子
            3、常见的属性值有哪些？   ——————
        */






        /* 4、默认值:如果单星盒子没设置高度或为auto,占满整个容器的高度 */
        .box {
            display: flex;
            /* 1、正向(默认) */
            align-items: start;

            /* 2、反向 */
            align-items: flex-end;

            /* 3、沿侧轴居中排列 */
            align-items: center;

            /* 4、子盒子没有高度（高度为auto），沿着侧轴线拉伸铺满整个弹性容器 */
            /* align-items: stretch; */

            height: 300px;
            margin: auto;
            border: 1px solid #000;
        }

        .box div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .box div:first-child {
            align-self: start;
        }

        .box div:last-child {
            /* 单独某一个子元素的侧轴对齐:align-self
            (取值与align-items一致) */
            align-self: end;
        }
    </style>
</head>

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

6. 伸缩比（flex）

属性:flex : 整数;

flex:1

效果：将整个flex容器剩余空间分为几分，再将其分给项目。

只占用父盒子剩余尺寸
是给子盒子添加这个属性

  <style>
       /* 
            小问题:
                1、属性名称与取值 => flex / 数字
                2、书写位置 => 弹性盒子内
        */
        .box {
            display: flex;
            height: 300px;
            border: 1px solid #000;
        }

        .box div {
            height: 200px;
            margin: 0 20px;
            background-color: pink;
        }

        .box div:nth-child(1) {
            width: 50px;
        }

        /* 将父元素剩下来的尺寸分为 3 份 */
        .box div:nth-child(2) {
            flex: 2;
        }

        .box div:nth-child(3) {
            flex: 1;
        }
    </style>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

mc.byte

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动web第三天（flex布局）重点

1.PC端网页和移动端网页的不同：PC屏幕大，网页固定版心；手机屏幕小，网页宽度多数为100%2 分辨率：2.1 pc分辨率：1920 * 1080；........2.2 制作网页参考物理分辨率还是逻辑分辨率？答：逻辑分辨率2.3 移动端主流设备分辨率三：视口目标：使用meta标签设置视口宽度，制作适配不同设备宽度的网页目标：网页宽度和设备宽度(分辨率)相同。解决办法：添加视口标签。视口：显示HTML网页的区域，用来约束HTML尺寸。......
复制链接

扫一扫