【第三部分 | 移动端开发】3：Flex布局

た入场券 2023-09-23 15:47 135阅读 0赞

**目录**

| Flex布局简介

| Flex父元素属性

设置主轴的方向 flex-direction

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

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

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

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

单行侧轴排列 VS 多行侧轴排列

复合属性 flex-flow

总结

| Flex子元素属性

简介

子项目占的份数 flex

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

属性定义子项的排列顺序（前后顺序） order

| 背景渐变 linear-gradient

--------------------

### **| Flex布局简介** ###

*  flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以 指定为 flex 布局
 *  当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效
 *  子容器可以横向排列也可以纵向排列
 *  总结而言就是 就是通过给父盒子添加flex属性，来控制子盒 子的位置和排列方式

--------------------

### **| Flex父元素属性** ###

#### **设置主轴的方向 flex-direction** ####

介绍：主轴和侧轴

*  在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有 ： 行和列、x 轴和y轴
 *  默认主轴方向就是 x轴方向，水平向右；默认侧轴方向就是 y 轴方向，水平向下

![3816cad1f0c14d018c3d2065188e9fbd.png][]

flec-direction属性

*  注意： 主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
 *  元素是默认沿着主轴来排列的。

![f2534161f6d44eacb7230b65cb65d16c.png][]

示例

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            div {
                display: flex;
                width: 800px;
                height: 300px;
                background-color: pink;
                /* 默认的主轴是 x 轴 row */
                flex-direction: row;
                /* justify-content: 是设置主轴上子元素的排列方式 */
                /* 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>

![218c7fbe16314367a13f46d68593faf3.png][]

--------------------

#### **设置主轴上的子元素排列方式 justify-content** ####

介绍

*  justify-content 属性定义了项目在主轴上的对齐方式：左对齐、右对齐、居中对齐等等
 *  使用这个属性之前一定要确定好主轴是哪个 说明：space-around 为每个子盒子平均分配左右的margin；space-between为首尾盒子贴边 只有右/左 margin，剩余盒子有左右margin。

![4fed1cb2ce5b4aa28c48d2d0d773d117.png][]

代码示例（主轴为x）

左右紧贴，再分配剩余空间：space-between

![68adf002d06a475eb9bf541d02db4496.png][]

代码示例（主轴为y）

![f64996881d4a4b2595880576e6981342.png][]

--------------------

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

介绍

*  在flex中，若一行内摆不下对应数量的盒子，则flex会强行把原本需要换行的盒子塞进去，从而导致width会强行变小
 *  默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。

![8cc9fd0e5b8c47dca53592065065f764.png][]

示例代码

![09af1c241fce47cdb360cc015db13d14.png][]

--------------------

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

介绍

*  如何实现这样的居中对齐效果？ 答案是：主轴使用 justify-content: center 侧轴再进行水平居中。
 *  在本节，我们将介绍侧轴上的子元素排列方式（单行）
 *  align-items 属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项（单行）的时候使用
 *  使用该属性的关键在于：先确定哪个是主轴，再确定子盒子在主轴的排序方式，最后再确定侧轴的排列方式

![6394fbb703ea45f18406b3d524610b0f.png][]

![07b05fa915484540842618943cbadd03.png][]

示例

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            div {
                display: flex;
                width: 800px;
                height: 400px;
                background-color: pink;
                /* 默认的主轴是 x 轴 row */
                flex-direction: column;
                justify-content: center;
                /* 我们需要一个侧轴居中 */
                /* 拉伸，但是子盒子不要给高度 */
                /* align-items: stretch; */
                align-items: center;
                /* align-content: center; */
            }
            
            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>

![bd3e144ee161438fa9ce1b7d51926603.png][]

--------------------

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

介绍

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

![64fc94deb42b4e2a989d18009ebd28e2.png][]

![33e641a4654e42669daacfea6ccd75b0.png][]

示例

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            div {
                display: flex;
                width: 800px;
                height: 400px;
                background-color: pink;
                /* 换行 */
                flex-wrap: wrap;
                /* 因为有了换行，此时我们侧轴上控制子元素的对齐方式我们用 align-content */
                /* align-content: flex-start; */
                /* align-content: center; */
                /* align-content: space-between; */
                align-content: space-around;
            }
            
            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>

![85731b2b343647c1af62ebad2304f418.png][]

--------------------

#### **单行侧轴排列 VS 多行侧轴排列** ####

*  align-items 适用于单行情况下， 只有上对齐、下对齐、居中和 拉伸
 *  align-content 适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、 下对齐、居中、拉伸以及平均分 配剩余空间等属性值
 *  总结就是单行找 align-items 多行找 align-conte
 *  案例 从左到右，依次是： 主轴为x的单行、主轴为y的单行、多行

![ca02d4484790487198f3eeca3724227c.png][]

--------------------

#### 复合属性 flex-flow ####

介绍

相当于同时设置了 flex-direction 和 flex-wrap

flex-flow:row wrap;

![acb23b1c504343dd9b724a77df1c2b57.png][]

示例

![45572bef2c4e455ab21bf96d56301c6a.png][]

--------------------

#### 总结 ####

Flex布局很简单。基本步骤如下：

1.  设置主轴方向 flex-firection 、主轴方向上的元素排列位置justify-content
2.  设置子元素是否换行 flex-wrap
3.  设置侧轴上的子元素排列方式（若主轴上只有一行，则使用align-items ； 若主轴上有多个元素且设置了wrap换行，则使用align-content）

###    **| Flex子元素属性** ###

#### **简介** ####

*  父元素属性设置子元素的排列方式
 *  子元素属性设置子元素的一些排列顺序、所占的份数等自身的属性

--------------------

#### **子项目占的份数 flex** ####

介绍

*  flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。
 *  说人话就是：我一行100px，如果有左右侧两个盒子各10px，则剩余中间的可分配空间为80px。flex就是分配这个空间
 *  **flex中数字代表的含义是：被申明flex的元素所占的份数为多少**
    
    如1、2号盒子flex=1，3号盒子flex=2，则1、2号盒子各自得到可分配空间的1/4，3号盒子可以得到可分配空间的 2/4

语法

![28ce87b676ab4d71a8d86f0f2f2452ee.png][]

代码示例

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            
            p {
                display: flex;
                width: 60%;
                height: 150px;
                background-color: pink;
                margin: 100px auto;
            }
    
            /* 第四个盒子有定长，则占用了100px ，而父元素width为body的 60%，则此时可剩余分配空间为 body*0.6 - 100px */
            p span:nth-child(4) {
                width: 100px;
                background-color: green;
            }
            
            /* 给第1、3个盒子设定占的份数：1 */
            p span {
                flex: 1;
            }
            /* 给第2个盒子设定占的份数：2 */
            p span:nth-child(2) {
                flex: 2;
                background-color: purple;
            }
    
            /* 经过上述分配，结果为：  4号盒子固定长度100px，然后1、2、3号盒子分配剩余的 0.6*body-100px 的空间。 */
            /* 1、3号盒子各分配1份，2号盒子分配2份。即：1、3号盒子得到剩余分配空间的 1/4 ，2号盒子得到剩余分配空间的 2/4 */
    
            
        </style>
    </head>
    
    <body>
        <p>
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </p>
    </body>
    
    </html>

![c45850a8431841a5bb12e548d550d31c.png][]

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

*  align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。
 *  默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch
 *  说人话就是：孩子叛逆，不想跟随父元素设置的align-items，要自己单独设置在侧轴的排列方式

![92e6ee6a078d4fd68b94f86fb4b0f4e9.png][]

--------------------

#### 属性定义子项的排列顺序（前后顺序） order ####

*  数值越小，排列越靠前，默认为0。
 *  注意：和 z-index 不一样。

![b37449bc25de468ea4cd0900f4b388df.png][]

--------------------

### | 背景渐变 linear-gradient ###

background: linear-gradient(起始方向, 颜色1, 颜色2, ...);
    background: -webkit-linear-gradient(left, red , blue);
    background: -webkit-linear-gradient(left top, red , blue);

*  **背景渐变必须添加浏览器私有前缀**，因为不同的浏览器不互相兼容 需要独立声明
 *  起始方向可以是： 方位名词 或者 度数 ， 如果省略默认就是 top
 *  一般来说，PE端使用这个linear-gradient多一点，因为只用添加一个-webkit- 私有前缀即可在所有PE端浏览器展示。
 *  相比之下，PC端基本不适用这个语法，因为需要声明非常多非常多的 浏览器私有前缀，特别的麻烦！

示例代码：

<!DOCTYPE html>
     <html lang="en">
     
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta http-equiv="X-UA-Compatible" content="ie=edge">
         <title>Document</title>
         <style>
             div {
                 width: 600px;
                 height: 200px;
                 /* 背景渐变必须添加浏览器私有前缀 */
                 /* background: -webkit-linear-gradient(left, red, blue); */
                 /* background: -webkit-linear-gradient(red, blue); */
                 background: -webkit-linear-gradient(top left, red, blue);
             }
         </style>
     </head>
     
     <body>
         <div></div>
     </body>
     
     </html>

![083d22435e104710847def34b26e461a.png][]

[3816cad1f0c14d018c3d2065188e9fbd.png]: https://img-blog.csdnimg.cn/3816cad1f0c14d018c3d2065188e9fbd.png
[f2534161f6d44eacb7230b65cb65d16c.png]: https://img-blog.csdnimg.cn/f2534161f6d44eacb7230b65cb65d16c.png
[218c7fbe16314367a13f46d68593faf3.png]: https://img-blog.csdnimg.cn/218c7fbe16314367a13f46d68593faf3.png
[4fed1cb2ce5b4aa28c48d2d0d773d117.png]: https://img-blog.csdnimg.cn/4fed1cb2ce5b4aa28c48d2d0d773d117.png
[68adf002d06a475eb9bf541d02db4496.png]: https://img-blog.csdnimg.cn/68adf002d06a475eb9bf541d02db4496.png
[f64996881d4a4b2595880576e6981342.png]: https://img-blog.csdnimg.cn/f64996881d4a4b2595880576e6981342.png
[8cc9fd0e5b8c47dca53592065065f764.png]: https://img-blog.csdnimg.cn/8cc9fd0e5b8c47dca53592065065f764.png
[09af1c241fce47cdb360cc015db13d14.png]: https://img-blog.csdnimg.cn/09af1c241fce47cdb360cc015db13d14.png
[6394fbb703ea45f18406b3d524610b0f.png]: https://img-blog.csdnimg.cn/6394fbb703ea45f18406b3d524610b0f.png
[07b05fa915484540842618943cbadd03.png]: https://img-blog.csdnimg.cn/07b05fa915484540842618943cbadd03.png
[bd3e144ee161438fa9ce1b7d51926603.png]: https://img-blog.csdnimg.cn/bd3e144ee161438fa9ce1b7d51926603.png
[64fc94deb42b4e2a989d18009ebd28e2.png]: https://img-blog.csdnimg.cn/64fc94deb42b4e2a989d18009ebd28e2.png
[33e641a4654e42669daacfea6ccd75b0.png]: https://img-blog.csdnimg.cn/33e641a4654e42669daacfea6ccd75b0.png
[85731b2b343647c1af62ebad2304f418.png]: https://img-blog.csdnimg.cn/85731b2b343647c1af62ebad2304f418.png
[ca02d4484790487198f3eeca3724227c.png]: https://img-blog.csdnimg.cn/ca02d4484790487198f3eeca3724227c.png
[acb23b1c504343dd9b724a77df1c2b57.png]: https://img-blog.csdnimg.cn/acb23b1c504343dd9b724a77df1c2b57.png
[45572bef2c4e455ab21bf96d56301c6a.png]: https://img-blog.csdnimg.cn/45572bef2c4e455ab21bf96d56301c6a.png
[28ce87b676ab4d71a8d86f0f2f2452ee.png]: https://img-blog.csdnimg.cn/28ce87b676ab4d71a8d86f0f2f2452ee.png
[c45850a8431841a5bb12e548d550d31c.png]: https://img-blog.csdnimg.cn/c45850a8431841a5bb12e548d550d31c.png
[92e6ee6a078d4fd68b94f86fb4b0f4e9.png]: https://img-blog.csdnimg.cn/92e6ee6a078d4fd68b94f86fb4b0f4e9.png
[b37449bc25de468ea4cd0900f4b388df.png]: https://img-blog.csdnimg.cn/b37449bc25de468ea4cd0900f4b388df.png
[083d22435e104710847def34b26e461a.png]: https://img-blog.csdnimg.cn/083d22435e104710847def34b26e461a.png