弹性盒(flex box)布局属性详解

已于 2023-08-15 18:56:36 修改
阅读量1.7k 收藏 12
点赞数 4
文章标签： css
于 2023-08-15 17:16:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/azkhx/article/details/132302592
版权

一、弹性盒布局

1.1 弹性盒布局介绍

1)弹性盒也叫伸缩布局盒模型

它是**css3引入的一种新的布局模式——flexbox**布局，即伸缩布局盒模型，用来提供一个更有效的方式制定、调整和分布一个容器里的项目布局。相比之前的布局方式，更便利于开发。

2)主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。flex容器会使子项目扩展来填充可用空间，或缩小他们以防止溢出容器。

3)专业术语解释

a、主轴-水平方向或者X轴

b、侧轴-垂直方向或者Y轴

c、伸缩容器（父元素）和伸缩项目（子元素）

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        p{
            text-align: center;
            margin: 20px 0;
            font-size: 20px;
            color: red;
        }
        /* 定义一个公共的类名，可以让代码复用 */
        .base{
            width: 1000px;
            height: 300px;
            border: 1px solid red;
            margin: 20px auto;
        }
        .base div{
            width: 200px;
            height: 200px;
        }
        .base div:nth-child(1){
            background-color: hotpink;
        }
        .base div:nth-child(2){
            background-color: greenyellow;
        }
        .base div:nth-child(3){
            background-color: skyblue;
        }

        .container1 div{
            float: left;
            margin: 0 66px;
            margin-top: 50px;
        }

        .container2{
            /*
                怎么定义一个弹性盒
                + 直接给容器（父元素）设置display:flex; 
                + 弹性盒的思想就是让父元素去控制子元素
                + 一旦把一个容器变成弹性盒布局后，那么所有的子元素默认的方向就变成了横向排列
            */
            display: flex;
            /*
                align-items
                + 控制子元素在容器里面垂直方向的位置（垂直对齐方式）
            */
            align-items: center;
            /*
                justify-content
                + 控制子元素在容器里面水平方向的位置（水平对齐方式）
                + space-around 表示元素和元素之间有相同距离
            */
            justify-content: space-around;
        }
    </style>
</head>
<body>
    <!--
        需求：
        + 一个容器里面有三个子元素
        + 希望三个子元素在容器里面是垂直居中的
        + 希望三个子元素在容器的水平方向，每一个都有间隙（左右两边一样的）的排列
    -->
    <p>之前的布局方式</p>
    <div class="base container1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <p>flexbox的布局方式</p>
    <div class="base container2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>
1.2 弹性盒属性
1.2.1伸缩流方向 flex-direction

flex-direction 主要用来创建主轴，定义伸缩项目在伸缩容器中的方向

row：从左向右

row-reverse：与row相反

column：从上到下

column-reverse：与column相反

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        p{
            text-align: center;
            margin: 20px 0;
            font-size: 20px;
            color: red;
        }
        /* 定义一个公共的类名，可以让代码复用 */
        .base{
            width: 1000px;
            height: 800px;
            border: 1px solid red;
            margin: 20px auto;
        }
        .base div{
            width: 200px;
            height: 200px;
        }
        .base div:nth-child(1){
            background-color: hotpink;
        }
        .base div:nth-child(2){
            background-color: greenyellow;
        }
        .base div:nth-child(3){
            background-color: skyblue;
        }

        .container1{
            height: 300px;
            display: flex;
            flex-direction: row;
        }
        .container2{
            height: 300px;
            display: flex;
            flex-direction: row-reverse;
        }
        .container3{
            display: flex;
            flex-direction: column;
        }
        .container4{
            display: flex;
            flex-direction: column-reverse;
        }
    </style>
</head>
<body>
    <p>1)伸缩流方向 flex-direction 主要用来创建主轴，定义伸缩项目在伸缩容器中的方向</p>
    <p>问题：默认情况下的元素自上而下排列，是否属于弹性盒布局模式？不属于。既然不属于弹性盒布局，那么弹性盒里面好用的属性你能用吗？</p>
    <p>row：从左向右，默认值。就是把容器转成弹性盒布局后，就是这样</p>
    <div class="base container1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <p>row-reverse：与row相反。这种效果和给元素设置了float:right;效果是一样的</p>
    <div class="base container2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <p>column：从上到下。如果把弹性的默认方向改变了，那么轴的方向也会跟着改变（原先的侧轴变成主轴，主轴变成侧轴）</p>
    <div class="base container3">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <p>column-reverse：与column相反</p>
    <div class="base container4">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.2.2 主轴对齐 justify-content

justify-content 主要用来定义伸缩项目沿主轴线的对齐方式

flex-start：伸缩项目向一行的起始位置靠齐

flex-end：伸缩项目向一行的结束位置靠齐

center：伸缩项目向一行的中间位置靠齐

space-between：伸缩项目会平均的分布在行里

space-around：伸缩项目会平均的分布在行里，两端保留一半的空间

space-evenly：项目均匀分布，所有项目之间及项目与边框之间距离相等

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        p{
            text-align: center;
            margin: 20px 0;
            font-size: 20px;
            color: red;
        }
        /* 定义一个公共的类名，可以让代码复用 */
        .base{
            width: 1000px;
            height: 300px;
            border: 1px solid red;
            margin: 20px auto;
            display: flex;
        }
        .base div{
            width: 200px;
            height: 200px;
        }
        .base div:nth-child(1){
            background-color: hotpink;
        }
        .base div:nth-child(2){
            background-color: greenyellow;
        }
        .base div:nth-child(3){
            background-color: skyblue;
        }
        .container1{
            justify-content: flex-start;
        }
        .container2{
            justify-content: center;
        }
        .container3{
            justify-content: flex-end;
        }
        .container4{
            justify-content: space-between;
        }
        .container5{
            justify-content: space-around;
        }
        .container6{
            justify-content: space-evenly;
        }
    </style>
</head>
<body>
    <p>2)主轴对齐 justify-content 主要用来定义伸缩项目沿主轴线的对齐方式</p>
    <p>flex-start：伸缩项目向一行的起始位置靠齐，默认值</p>
    <div class="base container1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <p>center：伸缩项目向一行的中间位置靠齐</p>
    <div class="base container2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <p>flex-end：伸缩项目向一行的结束位置靠齐。和右浮动效果不一样，是直接把元素平移过去的，没有改变元素原有的方向</p>
    <div class="base container3">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <p>space-between：伸缩项目会平均的分布在行里。最外层的元素两边没有距离</p>
    <div class="base container4">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <p>space-around：伸缩项目会平均的分布在行里，两端保留一半的空间</p>
    <div class="base container5">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <p>space-evenly：项目均匀分布，所有项目之间及项目与边框之间距离相等</p>
    <div class="base container6">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.2.3 侧轴对齐 align-items

align-items 伸缩项目行在侧轴上的对齐方式

flex-start：伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边

flex-end：伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边

center：伸缩项目的外边距在该行的侧轴上居中放置

baseline：伸缩项目根据伸缩项目的基线对齐

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>
        *{
            margin: 0;
            padding: 0;
        }
        p{
            text-align: center;
            margin: 20px 0;
            font-size: 20px;
            color: red;
        }
        /* 定义一个公共的类名，可以让代码复用 */
        .base{
            width: 1000px;
            height: 500px;
            border: 1px solid red;
            margin: 20px auto;
        }
        .base div{
            width: 200px;
            height: 200px;
        }
        .base div:nth-child(1){
            background-color: hotpink;
        }
        .base div:nth-child(2){
            background-color: greenyellow;
        }
        .base div:nth-child(3){
            background-color: skyblue;
        }

        .container1{
            display: flex;
            align-items: flex-start;
        }
        .container2{
            display: flex;
            align-items: center;
        }
        .container3{
            display: flex;
            align-items: flex-end;
        }

        .container4{
            display: flex;
            align-items: baseline;
        }
        .container4 div{
            height: auto;
        }
        .container4 div:nth-child(1){
            line-height: 50px;
        }
        .container4 div:nth-child(2){
            line-height: 100px;
        }
        .container4 div:nth-child(3){
            line-height: 200px;
        }

        .container5{
            display: flex;
            /* 不写也可以，因为是默认特性 */
            align-items: stretch;
        }
        .container5 div{
            height: auto;
        }

        .container6{
            display: flex;
            flex-direction: column;
            /* 不写也可以，因为是默认特性 */
            align-items: stretch;
        }
        .container6 div{
            width: auto;
        }
    </style>
</head>
<body>
    <p>3)侧轴对齐 align-items 伸缩项目行在侧轴上的对齐方式</p>
    <p>flex-start：伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边。默认值</p>
    <div class="base container1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <p>center：伸缩项目的外边距在该行的侧轴上居中放置</p>
    <div class="base container2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <p>flex-end：伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边</p>
    <div class="base container3">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <p>baseline：伸缩项目根据伸缩项目的基线对齐</p>
    <div class="base container4">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <p>stretch：伸缩项目拉伸填充整个伸缩容器。当容器变为弹性盒后，如果子项目没有设置高度或者宽度那么，宽度或者高度会自动拉伸</p>
    <div class="base container5">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <p>stretch拉伸，不设置宽度，只设置高度</p>
    <div class="base container6">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.2.4 换行 flex-wrap

flex-wrap

nowrap 不换行 默认值，不管超出还是不超出都不会换行

wrap 换行 一旦伸缩项目超出伸缩容器，那么就会换行

wrap-reverse 换行反向  主轴水平时，上下反向，主轴垂直时，左右反向

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        p{
            text-align: center;
            margin: 20px 0;
            font-size: 20px;
            color: red;
        }
        /* 定义一个公共的类名，可以让代码复用 */
        .base{
            width: 1000px;
            height: 800px;
            border: 1px solid red;
            margin: 20px auto;
        }
        .base div{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            border-radius: 50%;
            text-align: center;
        }
        .container1{
            display: flex;
            flex-wrap: wrap;
        }
        .container2{
            height: auto;
            display: flex;
            flex-wrap: wrap;
        }
        .container3{
            display: flex;
            flex-wrap: wrap-reverse;
        }
        .container4{
            display: flex;
            flex-direction: column;
            flex-wrap: wrap-reverse;
        }
    </style>
</head>
<body>
    <p>4)换行 flex-wrap。当咱们把容器转成弹性盒布局后，如果容器的宽度不够的情况下，里面的项目会相互进行挤压</p>
    <p>注意点：当使用了换行后，元素和元素之间会存在的默认行距，只有容器有高度的时候</p>
    <p>nowrap 不换行 默认值，不管超出还是不超出都不会换行</p>
    <p>wrap 换行 一旦伸缩项目超出伸缩容器，那么就会换行</p>
    <div class="base container1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
        <div>16</div>
        <div>17</div>
        <div>18</div>
        <div>19</div>
        <div>20</div>
        <div>21</div>
        <div>22</div>
        <div>23</div>
        <div>24</div>
        <div>25</div>
        <div>26</div>
        <div>27</div>
        <div>28</div>
        <div>29</div>
        <div>30</div>
    </div>
    <p>当使用了换行后，元素和元素之间会存在的默认行距，只有容器有高度的时候</p>
    <div class="base container2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
        <div>16</div>
        <div>17</div>
        <div>18</div>
        <div>19</div>
        <div>20</div>
        <div>21</div>
        <div>22</div>
        <div>23</div>
        <div>24</div>
        <div>25</div>
        <div>26</div>
        <div>27</div>
        <div>28</div>
        <div>29</div>
        <div>30</div>
    </div>
    <p>wrap-reverse 换行反向  主轴水平时，上下反向</p>
    <div class="base container3">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
        <div>16</div>
        <div>17</div>
        <div>18</div>
        <div>19</div>
        <div>20</div>
        <div>21</div>
        <div>22</div>
        <div>23</div>
        <div>24</div>
        <div>25</div>
        <div>26</div>
        <div>27</div>
        <div>28</div>
        <div>29</div>
        <div>30</div>
    </div>
    <p>主轴垂直时，左右反向</p>
    <div class="base container4">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
        <div>16</div>
        <div>17</div>
        <div>18</div>
        <div>19</div>
        <div>20</div>
        <div>21</div>
        <div>22</div>
        <div>23</div>
        <div>24</div>
        <div>25</div>
        <div>26</div>
        <div>27</div>
        <div>28</div>
        <div>29</div>
        <div>30</div>
    </div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.2.5 伸缩流方向属性与换行属性缩写形式 flex-flow

flex-flow

flex-flow：换行 伸缩方向; 两个值同时定义或者单独定义都生效，不分先后顺序

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        p{
            text-align: center;
            margin: 20px 0;
            font-size: 20px;
            color: red;
        }
        /* 定义一个公共的类名，可以让代码复用 */
        .base{
            width: 1000px;
            height: 800px;
            border: 1px solid red;
            margin: 20px auto;
        }
        .base div{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            border-radius: 50%;
            text-align: center;
        }
        .container1{
            display: flex;
            /* flex-direction: column;
            flex-wrap: wrap; */
            flex-flow: column wrap;
        }
    </style>
</head>
<body>
    <p>5)伸缩流方向属性与换行属性缩写形式 flex-flow </p>
    <p>两个值同时定义或者单独定义都生效，不分先后顺序</p>
    <div class="base container1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
        <div>16</div>
        <div>17</div>
        <div>18</div>
        <div>19</div>
        <div>20</div>
        <div>21</div>
        <div>22</div>
        <div>23</div>
        <div>24</div>
        <div>25</div>
        <div>26</div>
        <div>27</div>
        <div>28</div>
        <div>29</div>
        <div>30</div>
    </div>
</body>
</html>

在这里插入图片描述

1.2.6 单独伸缩项目在侧轴的对齐方式 align-self

align-self（加在子元素上）

注意点：align-self可以覆盖align-items

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>
        *{
            margin: 0;
            padding: 0;
        }
        p{
            text-align: center;
            margin: 20px 0;
            font-size: 20px;
            color: red;
        }
        /* 定义一个公共的类名，可以让代码复用 */
        .base{
            width: 1000px;
            height: 500px;
            border: 1px solid red;
            margin: 20px auto;
            display: flex;
            align-items: center;
        }
        .base div{
            width: 200px;
            height: 200px;
        }
        .base div:nth-child(1){
            background-color: hotpink;
            align-self: flex-start;
        }
        .base div:nth-child(2){
            background-color: greenyellow;
        }
        .base div:nth-child(3){
            background-color: skyblue;
            align-self: flex-end;
        }
    </style>
</head>
<body>
    <p>6)align-self（加在子元素上）：主要用来设置单独伸缩项目在侧轴的对齐方式。注意点：align-self可以覆盖align-items</p>
    <p>flex-start：伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边；（元素位于容器的开头）</p>
    <p>flex-end：伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边；（元素位于容器的结尾）</p>
    <p>center：伸缩项目的外边距盒 在该行的侧轴上居中放置；（元素位于容器的中间）</p>
    <p>stretch：伸缩项目拉伸填充整个伸缩容器。（元素被拉伸以适应容器）</p>
    <div class="base container1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

在这里插入图片描述

1.2.7 堆栈伸缩行 align-content

align-content(行与行之间的对齐方式) 定义多个伸缩行的对齐方式； 往往要与换行同时应用，没有换行就不存在多行的情况

flex-start：各行向伸缩容器的起点位置堆叠；（没有行距）

flex-end：各行向伸缩容器的结束位置堆叠；（底部对其没有行距）

center：各行向伸缩容器的中间位置堆叠；（居中没有行距）

space-between：各行在伸缩容器中平均分布；（两端对齐，中间自动分配）

space-around：各行在伸缩容器中平均分布，两端保留一半的空间；（自动分配距离）

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        p{
            text-align: center;
            margin: 20px 0;
            font-size: 20px;
            color: red;
        }
        /* 定义一个公共的类名，可以让代码复用 */
        .base{
            width: 1000px;
            height: 800px;
            border: 1px solid red;
            margin: 20px auto;
            display: flex;
        }
        .base div{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            border-radius: 50%;
            text-align: center;
        }
        .container1{
            flex-wrap: wrap;
            align-content: flex-start;
        }
        .container2{
            flex-wrap: wrap;
            align-content: center;
        }
        .container3{
            flex-wrap: wrap;
            align-content: flex-end;
        }
        .container4{
            flex-wrap: wrap;
            align-content: space-between;
        }
        .container5{
            flex-wrap: wrap;
            align-content: space-around;
        }
    </style>
</head>
<body>
    <p>7)堆栈伸缩行 align-content(行与行之间的对齐方式) 定义多个伸缩行的对齐方式；  往往要与换行同时应用，没有换行就不存在多行的情况</p>
    <p>flex-start：各行向伸缩容器的起点位置堆叠；（没有行距）</p>
    <div class="base container1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
        <div>16</div>
        <div>17</div>
        <div>18</div>
        <div>19</div>
        <div>20</div>
        <div>21</div>
        <div>22</div>
        <div>23</div>
        <div>24</div>
        <div>25</div>
        <div>26</div>
        <div>27</div>
        <div>28</div>
        <div>29</div>
        <div>30</div>
    </div>
    <p>center：各行向伸缩容器的中间位置堆叠；（居中没有行距）</p>
    <div class="base container2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
        <div>16</div>
        <div>17</div>
        <div>18</div>
        <div>19</div>
        <div>20</div>
        <div>21</div>
        <div>22</div>
        <div>23</div>
        <div>24</div>
        <div>25</div>
        <div>26</div>
        <div>27</div>
        <div>28</div>
        <div>29</div>
        <div>30</div>
    </div>
    <p>flex-end：各行向伸缩容器的结束位置堆叠；（底部对其没有行距）</p>
    <div class="base container3">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
        <div>16</div>
        <div>17</div>
        <div>18</div>
        <div>19</div>
        <div>20</div>
        <div>21</div>
        <div>22</div>
        <div>23</div>
        <div>24</div>
        <div>25</div>
        <div>26</div>
        <div>27</div>
        <div>28</div>
        <div>29</div>
        <div>30</div>
    </div>
    <p>space-between：各行在伸缩容器中平均分布；（两端对齐，中间自动分配）</p>
    <div class="base container4">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
        <div>16</div>
        <div>17</div>
        <div>18</div>
        <div>19</div>
        <div>20</div>
        <div>21</div>
        <div>22</div>
        <div>23</div>
        <div>24</div>
        <div>25</div>
        <div>26</div>
        <div>27</div>
        <div>28</div>
        <div>29</div>
        <div>30</div>
    </div>
    <p>space-around：各行在伸缩容器中平均分布，两端保留一半的空间；（自动分配距离）</p>
    <div class="base container5">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
        <div>16</div>
        <div>17</div>
        <div>18</div>
        <div>19</div>
        <div>20</div>
        <div>21</div>
        <div>22</div>
        <div>23</div>
        <div>24</div>
        <div>25</div>
        <div>26</div>
        <div>27</div>
        <div>28</div>
        <div>29</div>
        <div>30</div>
    </div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

1.2.8 显示顺序 order

order （加在子元素上）

默认状态是按照标准流的顺序排列，在flexbox模型里，可以通过order改变伸缩项目的顺序

a、不定义order的伸缩项目会排到前面

b、order：1； 排第一   order：2； 排第二

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        p{
            text-align: center;
            margin: 20px 0;
            font-size: 20px;
            color: red;
        }
        /* 定义一个公共的类名，可以让代码复用 */
        .base{
            width: 1000px;
            height: 300px;
            border: 1px solid red;
            margin: 20px auto;
            display: flex;
        }
        .base div{
            width: 200px;
            height: 200px;
        }
        .base div:nth-child(1){
            background-color: hotpink;
            order: 3;
        }
        .base div:nth-child(2){
            background-color: greenyellow;
            order: 2;
        }
        .base div:nth-child(3){
            background-color: skyblue;
            order: 1;
        }
    </style>
</head>
<body>
    <p>8)显示顺序 order （加在子元素上）默认状态是按照标准流的顺序排列，在flexbox模型里，可以通过order改变伸缩项目的顺序</p>
    <p>例如：div在容器的第二个位置，现在想要放在第一个位置，咱们可以不动代码的情况使用order来解决</p>
    <p>注意点：不定义order的元素会排列前面，定义的会按照数字来排列，最小的在前面</p>
    <div class="base">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

在这里插入图片描述

1.2.9 flex

flex（设置在子元素上） 作用：可以让元素自动占用容器的可用空间，等比划分

flex:1;

flex:2;

...

代码和效果与flex-grow写在一起的

1.2.10 定义项目的放大比例 flex-grow

默认为0，即如果存在剩余空间，也不放大

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        p{
            text-align: center;
            margin: 20px 0;
            font-size: 20px;
            color: red;
        }
        /* 定义一个公共的类名，可以让代码复用 */
        .base{
            width: 1000px;
            height: 200px;
            border: 1px solid red;
            margin: 20px auto;
        }
        .base div{
            width: 200px;
            height: 200px;
        }
        .base div:nth-child(1){
            background-color: hotpink;
        }
        .base div:nth-child(2){
            background-color: greenyellow;
        }
        .base div:nth-child(3){
            background-color: skyblue;
        }

    
        .container1{
            display: flex;
        }
        .container1 div:nth-child(1){
            flex: 1;
        }
        .container1 div:nth-child(2){
            flex: 2;
        }
        .container1 div:nth-child(3){
            flex: 3;
        }

        .container2{
            display: flex;
        }
        .container2 div:nth-child(1){
            flex-grow: 1;
        }
        .container2 div:nth-child(2){
            flex-grow: 2;
        }
        .container2 div:nth-child(3){
            flex-grow: 3;
        }
    </style>
</head>
<body>
    <p>9)flex（设置在子元素上） 作用：可以让元素自动占用容器的可用空间，等比划分</p>
    <p>可以使用flex属性可以把容器里面的剩余空间给占满，可以实现自适应</p>
    <p>注意点：当给其中一个元素设置了flex:1;那么它会把剩余空间给全部占了。如果所有元素都设置了flex属性，那么会根据flex属性的值去决定占几份</p>
    <div class="base container1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <p>10)flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大</p>
    <p>如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。</p>
    <div class="base container2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

在这里插入图片描述

1.2.11 定义项目的缩小比例 flex-shrink

默认为1，即如果空间不足，该项目将缩小

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        p{
            text-align: center;
            margin: 20px 0;
            font-size: 20px;
            color: red;
        }
        /* 定义一个公共的类名，可以让代码复用 */
        .base{
            width: 1000px;
            height: 800px;
            border: 1px solid red;
            margin: 20px auto;
            display: flex;
        }
        .base div{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            border-radius: 50%;
            text-align: center;
        }
        .base div:nth-child(3){
            flex-shrink: 0;
        }
    </style>
</head>
<body>
    <p>11)flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小</p>
    <p>如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。</p>
    <div class="base">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
        <div>16</div>
        <div>17</div>
        <div>18</div>
        <div>19</div>
        <div>20</div>
        <div>21</div>
        <div>22</div>
        <div>23</div>
        <div>24</div>
        <div>25</div>
        <div>26</div>
        <div>27</div>
        <div>28</div>
        <div>29</div>
        <div>30</div>
    </div>
</body>
</html>

在这里插入图片描述

1.2.12 flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）

浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。不常用，还在不断变化中。

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        p{
            text-align: center;
            margin: 20px 0;
            font-size: 20px;
            color: red;
        }
        /* 定义一个公共的类名，可以让代码复用 */
        .base{
            width: 1000px;
            height: 200px;
            border: 1px solid red;
            margin: 20px auto;
        }
        .base div{
            width: 200px;
            height: 200px;
        }
        .base div:nth-child(1){
            background-color: hotpink;
        }
        .base div:nth-child(2){
            background-color: greenyellow;
        }
        .base div:nth-child(3){
            background-color: skyblue;
        }

    
        .container1{
            display: flex;
        }
        .container1 div:nth-child(1){
            flex: 1;
            flex-basis: 300px;
        }
        .container1 div:nth-child(2){
            flex: 2;
        }
        .container1 div:nth-child(3){
            flex: 3;
        }

        .container2{
            display: flex;
        }
        .container2 div:nth-child(1){
            flex-grow: 1;
        }
        .container2 div:nth-child(2){
            flex-grow: 2;
        }
        .container2 div:nth-child(3){
            flex-grow: 3;
        }
    </style>
</head>
<body>
    <p>12)flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）</p>
    <p>注意点：浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。</p>
    <p>9)flex（设置在子元素上） 作用：可以让元素自动占用容器的可用空间，等比划分</p>
    <div class="base container1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <p>10)flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大</p>
    <div class="base container2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

在这里插入图片描述

1.2.13 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>
        *{
            margin: 0;
            padding: 0;
        }
        p{
            text-align: center;
            margin: 20px 0;
            font-size: 20px;
            color: red;
        }
        /* 定义一个公共的类名，可以让代码复用 */
        .base{
            width: 1000px;
            height: 800px;
            border: 1px solid red;
            margin: 20px auto;
            display: flex;
        }
        .base div{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            border-radius: 50%;
            text-align: center;
        }
        .base div:nth-child(3){
            flex: 0 0 130px;
        }
    </style>
</head>
<body>
    <p>flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto</p>
    <div class="base">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
        <div>16</div>
        <div>17</div>
        <div>18</div>
        <div>19</div>
        <div>20</div>
        <div>21</div>
        <div>22</div>
        <div>23</div>
        <div>24</div>
        <div>25</div>
        <div>26</div>
        <div>27</div>
        <div>28</div>
        <div>29</div>
        <div>30</div>
    </div>
</body>
</html>

在这里插入图片描述

azkhx
关注
  • 4
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
弹性盒布局（flexbox）简要
将心_的博客
03-21 778
flex布局（弹性盒）css3弹性盒一、弹性盒设置二、flex容器属性插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 css3弹性盒 弹性盒子是 CSS3 的一种新的布局模式。 ...
Flex弹性盒子布局详解
i前端小学生的博客
05-06 430
Flex弹性盒子布局详解 目录 Flex弹性盒子布局详解 1、什么是 flex 布局 2、基本概念 3、容器的属性 4、项目的属性 1、什么是 flex 布局 Flex 是 Flexible Box 的缩写，意为"灵活的盒子"或"弹性的盒子"，所以 flex 布局一般也叫作"弹性布局"。 2、基本概念 2.1、什么是 flex 容器（flex container）？ 采用 flex 布局的元素，称为 flex 容器： .box { display: flex | i.
详解flex布局(flexbox)完整指南
greendx的博客
03-14 3037
详解flex盒子布局
弹性盒子(Flex Box)详解
web$-小白
07-24 3万+
弹性盒子 ,flex display
Flexbox布局详解
最新发布
qq_43733543的博客
06-26 1051
Flexbox布局详解
弹性盒子的布局
jan_ping的博客
02-13 6665
1 弹性盒子(弹性布局) 1.1 弹性布局介绍 Flexbox是flexible box的简称(意思是"灵活的盒子容器")，是CSS3引入的新的布局模式。它决定了 元素如何在页面商排列，使他们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为Flexbox，是因为它能够扩展和收缩flex容器内地元素，以最大限度地填充可用空 间。与以前布局方式(如table布局和浮动元素内嵌元素)相比，Flexbox是一个更强大的方式 （1）在不同方向排列元素 （2）重新排列元素的显示顺序 （3）更改元
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
热门推荐
肥晨开发的学习之路
06-16 12万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
CSS3 弹性盒子(Flex Box)
qq_52301431的博客
04-05 1万+
25、CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒子（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 案例，实现水平垂直居中： 正在上传…重新上传取消 绝对定位与负边距实现 #container{ position:relative; } ..
弹性盒模型（详解）
weixin_46726346的博客
10-18 5474
摘要 关于弹性盒模型，属性也是比较多，属性的值也是比较杂，所以看起来也是比较吃力，总是学习的时候似乎已经掌握了，慢慢不用的话一些属性又不会了。 这一篇文章，只去理解弹性盒模型的属性，而不会列出所有属性的值。 重点在于理解，而非去死记硬背。 1.创建弹性盒子 所有人应该都知道我们应该使用display:flex来创建一个弹性盒子。 但是其实还有另一种创建方式：display:inline-flex。 乍一看这个属性和display:block , display:inline-block是不是有一点点像。 其
css flex 弹性布局详解
09-24
CSS Flex（弹性布局）是一种强大的布局模式，特别适用于创建响应式设计，因为它允许开发者更灵活地控制元素在容器中的对齐方式和排列顺序。在本文中，我们将深入探讨Flex布局的关键概念，包括基本用法、父容器属性...
CSS3 Flex 弹性布局实例代码详解
01-19
//注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 二、容器属性 1. flex-direction flex-direction 决定项目的排列方向   .box { flex-direction: row | row-reverse | column | ...
详解CSS中的flex布局
01-19
flex布局又称为弹性布局，任何一个容器都可以指定为flex布局 声明弹性盒子的几种方式 就像前面说的，所有容器都可以指定为flex布局 .box{ display:flex;} 行内元素也可以使用： display:inline-flex; 改变弹性...
详解CSS中的flex容器与flex属性
12-13
flex container（flex容器 或 弹性容器） flex容器是flex元素的的父元素。 通过设置display 属性的值为flex 或 inline-flex定义。 注旧版本的属性值： box：将对象作为弹性容器显示。（最老版本）inline-box：将对象...
flex.md flex属性详解文档
04-14
flex原理和全属性详解flex 是 flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局
弹性盒子（flexbox）布局属性详解
橘猫吃不胖的博客
10-28 3万+
弹性盒子布局属性详解1 弹性盒子概述2 基本概念3 常用属性3.1 布局方向flex-direction3.2 环绕效果flex-wrap3.3 水平对齐方式justify-content3.4 交叉轴对齐方式align-items3.5 轴线对齐方式align-content4 项目属性(item)4.1 排列顺序order4.2 放大比例flex-grow4.3 缩小比例flex-shrink4.4 单个对齐方式align-self4.5 综合属性flex 1 弹性盒子概述 Flexbox 是 flex
CSS FlexBox布局全面详解
qq_43293207的博客
04-11 3448
1. 什么是FlexBox FlexBox（”弹性布局”）是CSS3提供的用于布局的一套新属性，这套属性包括针对容器（弹性容器，flex container）和针对其直接子元素（弹性项，flex item）的两类属性 FlexBox可以控制弹性项（flex item）的以下方面： 大小，基于内容和可用空间 流动方向，水平还是垂直，正向还是反向 两个轴向的对齐和分布 顺序，可覆盖源代码中的顺序 flex container默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axi
flex弹性盒子布局
weixin_45249263的博客
02-13 1万+
flex是flexible box 的缩写，即为“弹性布局”，用来为盒子模型提供最大的灵活性，任何容器都可以指定为flex布局；
flex弹性盒子布局（详细）
互联网小队
09-30 7574
弹性盒模型 1、伸缩容器display Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素 自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。 主轴的开 始位置（与边框的交叉点）叫做 m
教你快速上手Flex弹性盒布局（容器属性）
passerby的博客
07-13 2304
Flex弹性布局CSS3弹性盒（Flexilble Box或flexbox）是一种布局方式，常用与当页面需要适应不同的屏幕大小以及设备类型是能够确保元素拥有恰当的行为作用能够更加高效方便地控制元素的对齐，排列无论元素的尺寸是固定高度的还是动态的，都可以自动计算布局内元素的尺寸控制元素在页面内的布局方向按照不同的DOM所指定排序方式对屏幕上的元素重新排列好处可以让子元素排列在一行使子元素的高度一致。
CSS Flex弹性布局详解：方向与换行控制
CSS Flex弹性布局详解深入解析 在现代前端开发中，Flex布局（Flexible Box Layout）是一种强大的工具，特别适合用于响应式设计，特别是在移动设备上实现灵活且易于管理的布局。本文将通过一个基础案例来讲解如何...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值