当前位置：首页 > news >正文

0基础学前端----移动WEB开发之flex布局DAY15

news 来源：原创 2025/5/21 17:50:27

0基础学前端—移动WEB开发之flex布局DAY15

视频参考：B站Pink老师
本节重点：flex盒子布局原理、flex布局常用属性、携程移动端首页案例

本章目录

0基础学前端---移动WEB开发之flex布局DAY15
- 目标
- - 1. flex布局体验
  - - 1.1 传统布局和flex布局
  - 2. flex布局原理
  - - 2.1 布局原理
  - 3. flex布局父项常见属性
  - - 3.1 常见父项属性
    - 3.2 **flex-direction**设置主轴的方向
    - 3.3 **justify-content**设置主轴上子元素排列方式
    - 3.4 **flex-wrap**设置子元素是否换行
    - 3.5 **align-items** 设置侧轴上的子元素排列方式（单行）
    - 3.6 **align-content** 设置侧轴上的子元素排列方式（多行）
    - 3.7 **flex-flow** 复合属性
  - 4 flex布局子项常见属性
  - - 4.1 flex属性
    - 4.2 **align-self**控制子项自己在侧轴上的排列方式
    - 4.3 **order**属性定义项目的排列顺序

目标

能够说出flex盒子布局原理
能够使用flex布局常用属性
能够独立完成携程移动端首页案例

1. flex布局体验

1.1 传统布局和flex布局

传统布局：

兼容性好
布局繁琐
局限性，不能再移动端很好的布局

flex弹性布局：

操作方便，布局极为简单，移动端应用很广泛
PC端支持情况较差

建议：

如果是PC端页面布局，使用传统布局
如果是移动端或者不考虑兼容问题的PC端页面，还是使用flex弹性布局

参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            justify-content: space-around;
        }

        div span {
            /* width: 150px; */
            height: 100px;
            background-color: purple;
            margin-right: 5px;
            flex: 1;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

其中包含的属性，我们会在后面详细讲解。
结果展示：
在这里插入图片描述

2. flex布局原理

2.1 布局原理

flex为”弹性布局“任何一个容器都可以指定为flex布局

当我们为父盒子设为flex布局之后，子元素的float、clear、vertical-align属性将失效
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
采用flex布局的元素，称为flex容器，简称”容器“，他的所有子元素自动成为容器成员，称为flex项目，简称‘项目’。
上一个案例中的div为flex父容器
体验中span就是容器的flex项目
子容器可以横向排列也可以纵向排列
总结flex布局原理：**通过给父盒子添加flex属性来控制子盒子的位置和排列方式。

3. flex布局父项常见属性

3.1 常见父项属性

六个：flex-direction、justify-content、flex-wrap、align-content、align-items、flex-flow

3.2 flex-direction设置主轴的方向

主轴与侧轴
在flex布局中，是分为主轴和侧轴连各个方向，同样的叫法有行和列，x和y轴。
属性值：决定主轴的方向
主轴和侧轴是会变化的，就看flex-direction设谁为主轴，剩下的就是侧轴，而我们的子元素是跟着主轴来排列的。

属性	说明
row	----->
row-reverse	<-----
column	从上到下
column-reverse	从下到上

参考代码：这个案例主要练习了flex主轴方向

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /*给父级添加flex属性,默认主轴为x轴*/
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /*此时y轴是侧轴，我们的元素是跟着主轴来排列的*/
            /* flex-direction: row; */

            /* flex-direction: row-reverse; */
            /*可以把主轴设置为y轴，那么x轴为侧轴*/
            /* flex-direction: column; */
            flex-direction: column-reverse;
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

结果展示：
在这里插入图片描述

3.3 justify-content设置主轴上子元素排列方式

justify-content属性定义了项目在主轴上的对齐方式
使用这个属性之前一定要确定好主轴是哪个

属性	说明
flex-start	默认值，从头开始
flex-end	从尾开始
center	在主轴居中对齐
space-around	平分剩余空间
space-between	先两边贴边再评分剩余空间（重要）

代码展示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /*设置主轴上(此处为row)子元素的排列方式*/
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /*居中对齐*/
            /* justify-content: center; */
            /*平均分剩余空间*/
            /* justify-content: space-around; */
            /*先两边贴边再分配剩余空间*/
            justify-content: space-between;
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>

</html>

结果展示：
flex-start：
在这里插入图片描述
flex-end：

center:

space-around:

space-between:

3.4 flex-wrap设置子元素是否换行

默认情况下，项目都排在一条线（又称”轴线“上）。

属性	说明
nowrap	默认值，不换行
wrap	换行

参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 600px;
            height: 400px;
            background-color: pink;
            /*flex布局中，默认的子元素不换行，如果装不开，会缩小子元素的宽度放在父元素里*/
            flex-wrap: wrap;
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>

</html>

结果展示：
在这里插入图片描述

3.5 align-items 设置侧轴上的子元素排列方式（单行）

该属性是控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项时使用

属性	说明
flex-start	从上到下
flex-end	从下到上
center	垂直居中
stretch	拉伸（默认值）不给高度（要根据主轴找高）

参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            flex-direction: column;
            background-color: pink;
            /*默认主轴为x轴row*/
            justify-content: center;
            /*还需要一个侧轴居中*/
            align-items: center;
            /*拉伸，但是子盒子不要给高度*/
            /* align-items: stretch; */
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>

    </div>
</body>

</html>

结果展示：
在这里插入图片描述
不加高度，使用stretch:

加高度，使用stretch:

如果子元素本身设置了固定的height属性, stretch的效果就会受到限制。

3.6 align-content 设置侧轴上的子元素排列方式（多行）

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下无效果。

属性	说明
flex-start	默认值，从侧轴头部开始排列
flex-end	从侧轴尾部开始排列
center	从侧轴中间开始排列
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	设置子项元素高度平分父元素高度

参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            flex-wrap: wrap;
            /* align-content: center; */
            /* align-content: space-between; */
            /* align-content: space-around; */
            /* align-content: flex-end; */
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>

</html>

结果展示（仅展示center的效果）：
在这里插入图片描述
3.5和3.6的区别：单行找align-items,多行找align-content

3.7 flex-flow 复合属性

flex-flow 是 flex-direction 和 flex-wrap的复合属性

  flex-flow:row wrap;

参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 600px;
            height: 300px;
            background-color: pink;
            /* flex-direction: column;
            flex-wrap: wrap; */
            /*合并上面两句的写法*/
            flex-flow: column wrap;
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>

</html>

4 flex布局子项常见属性

4.1 flex属性

flex属性定义子项目分配剩余空间，用flex来表示占多少份数。

 .item{
 		flex:<number>;/*default 0*/
 }

参考代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }

        section div:nth-child(1) {
            width: 100px;
            height: 150px;
            background-color: red;
        }

        section div:nth-child(2) {
            flex: 1;
            background-color: green;
        }

        section div:nth-child(3) {
            width: 100px;
            height: 150px;
            background-color: blue;
        }

        p {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
        }

        p span {
            flex: 1;
        }

        p span:nth-child(2) {
            flex: 2;
            background-color: purple;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
</body>

</html>

结果展示：
在这里插入图片描述

4.2 align-self控制子项自己在侧轴上的排列方式

align-self允许单个项目与其他项目有不一样的对齐方式，可覆盖align-items属性。
默认值为auto,表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

 span:nth-child(2){
/*设置自己在侧轴上的排列方式*/
align-self:flex-end;
}

参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            /*3个盒子自己动*/
            align-items: flex-start;

        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;

        }

        div span:nth-child(2) {
            /*默认值为0，-1<0,所以在前面*/
            /* order: -1; */
        }

        div span:nth-child(3) {
            align-self: flex-end;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

结果展示：
align-self覆盖了align-items
在这里插入图片描述

4.3 order属性定义项目的排列顺序

数值越小，排列越靠前，默认值为0。因为设置了 order: -1;，所以2在1的前面。
注：和z-index不同,z-index是堆叠效果
在这里插入图片描述
案例：携程网移动端首页
参考代码：携程练习
参考效果：

在其中涉及到背景线性渐变的知识点，可以使用以下方法：

background:linear-gradient(起始方向，颜色1，颜色2，…);
起始方向：如果省略默认为top（可以是方位名词或度数）
background:-webkit-linear-gradient(left，red，blue，…);
background:-webkit-linear-gradient(left top，red，blue，…);
-webkit-必须加私有前缀
—————————————————————————————————————————
下面即将更新JS的相关内容，有什么问题都可以在评论区进行讨论哦！