如何深入理解弹性布局，小司机娓娓道来！

朴灿烈づ我的快乐病毒、 2022-10-22 09:17 9阅读 0赞

## 弹性布局（Flex） ##

**\#\# 弹性盒子**（父级）

## 弹性布局 ##

父级  叫做弹性容器
    子级  叫做弹性元素

下面七种样式都是在父级容器（弹性容器）里面设置的

1.定义弹性盒子
        display：flex
    2.用于控制弹性盒子里面的弹性元素排列的方向
        flex-direction
            row从左到右   row-reverse从右到左  column从上到下 column-reverse从下到上
    3.规定是单行还是多行
        flex-wrap
            nowrap 默认 元素不拆行或不拆列
            wrap   必要的时候拆行或拆列
            wrap-reverse 必要的时候拆行或拆列，但是拆的方向是相反的
    4.flex-flow
        flex-wrap和direction的结合体
    轴的概念
        主轴   交叉轴  
    5.控制元素在主轴上的排列方式
        justify-content 
            flex-start      紧靠开头
            flex-end        紧靠结尾
            center          居中
            space-between   第一个元素紧靠七点第二个元素紧靠重点 其他空间由其他元素平均分配
            space-around    每个元素两侧的间距相等
            space-evenly    元素间距距离平均分配
    6.控制元素在交叉轴上的排列方式
        align-items
            stretch   元素被拉伸以适应容器（没有设置固定的行高或者大于高度字体大小）
            center    位于容器的中心
            flex-start  紧靠交叉轴的开头
            flex-end     紧靠交叉轴的结尾
    7.适用于多行用于控制行而不是元素在交叉轴的排列方式
        align-content
            flex-start      每一行紧靠交叉轴开始位置
            flex-end        每一行紧靠交叉轴的结束位置
            center          居中  紧靠交叉轴的中间位置
            space-between   第一行紧靠起点最后一行紧靠终点 其他空间由其他行平均分配
            space-around    每行两侧的间距相等
            space-evenly    每行间距距离平均分配

下面的都是在弹性元素里面的写的 放在弹性的盒子里面的元素都叫弹性元素 注意： 不用使用float和clear规则 弹性元素都为块级元素 绝对定位不参与弹性布局

**\#\# 弹性元素**（子级）  
1.align-self  
用来设置单个元素在交叉轴的排列方式  
stretch 默认方式平均分配  
flex-start 单个元素紧靠交叉轴的开始位置  
flex-end center  
2.flex-grow  
用于将弹性盒子的可用空间，分配给弹性元素  
3.flex-shrink  
装不下的时候定义的缩小值 0 1 2 3 …  
3.flex-basis  
定在了在在分配多余空间之间项目占据的主轴空间  
优先级更高的width  
4.order  
调整元素的位置

下面用图示来讲一下：

<!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; } .father{ /* width: 1200px; */ height: 300px; border: 3px solid gold; display: flex; flex-flow:row nowrap; justify-content: start; margin-top: 150px; /* stretch 元素被拉伸以适应容器 */ /* align-content: space-evenly; */ /* align-items: space-between; */ } .father div{ width: 250px; height: 100px; border: 2px solid pink; text-align: center; line-height: 100px; font-size: 40px; } .father div:nth-of-type(1){ align-self: flex-start; width: 240px; flex-grow: 1; flex-shrink: 0; order: 4; } div:nth-of-type(2){ align-self: flex-start; flex-grow: 3; flex-shrink: 1; order: 3; } div:nth-of-type(3){ align-self: flex-start; flex-grow: 5; flex-shrink: 4; } div:nth-of-type(4){ align-self: flex-start; flex-grow: 7; flex-shrink: 4; } </style>
    </head>
    <body>
        <div class="father">
            <div>div1</div>
            <div>div2</div>
            <div>div3</div>
            <div>div4</div>
        </div>
    </body>
    </html>

**沿着X主轴排列的几种情况：**

justify-content  
flex-start 紧靠开头  
flex-end 紧靠结尾  
center 居中  
space-between 第一个元素紧靠七点第二个元素紧靠重点 其他空间由其他元素平均分配  
space-around 每个元素两侧的间距相等  
space-evenly 元素间距距离平均分配![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 6]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 7]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 9]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 10]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 11]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 12]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 13]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 14]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 15]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 16]  
**控制元素在交叉轴上的排列方式**

align-items
            stretch   元素被拉伸以适应容器（没有设置固定的行高或者大于高度字体大小）
            center    位于容器的中心
            flex-start  紧靠交叉轴的开头
            flex-end     紧靠交叉轴的结尾

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 17]  
**\#\# 弹性元素（子级）**

1.align-self
        用来设置单个元素在交叉轴的排列方式
            stretch  默认方式平均分配
            flex-start   单个元素紧靠交叉轴的开始位置
            flex-end   center
    2.flex-grow
        用于将弹性盒子的可用空间，分配给弹性元素
    3.flex-shrink
        装不下的时候定义的缩小值  0 1 2 3 ....
    3.flex-basis
        定在了在在分配多余空间之间项目占据的主轴空间
        优先级更高的width
    4.order
        调整元素的位置

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 18]  
总结：总之在了解弹性布局的各项元素之后，还是要将弹性布局放到实际案例中去，结合实际来用，作用不可小觑，我们主要用上面详细介绍的父级容器的排列方式，这个以后用的挺多的，子级元素用的比较少，大家了解一下即可不需要深究！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/2f78df5ec3a64a38aaef3c0edc3c2619.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221022/4e2fe7bdbc994e4ca39c491aabbb8d0f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221022/3c9d8c2f33fc4557a1a8177930d1fa7b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221022/ffb9c812ee2b41e58665b50664b37261.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221022/26a88e0d23b64b6c8b84886cc57df042.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221022/7315ffe377754cde8cbc6789e642274c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221022/80a9da5754c24e4088ba85fa647058a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221022/a3b394f843d44f06952394271757c85e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221022/59d984ffbf3f4f92b6b3352378d1014e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 9]: https://img-blog.csdnimg.cn/20210328215914143.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221022/77e19376af3a4ee59810016ab99652a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221022/e04ea5dc080143b8a92eff4e683f14de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 12]: https://img-blog.csdnimg.cn/20210328220029258.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 13]: https://img-blog.csdnimg.cn/20210328220102777.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 14]: https://img-blog.csdnimg.cn/2021032822012269.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 15]: https://img-blog.csdnimg.cn/20210328220144662.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 16]: https://img-blog.csdnimg.cn/20210328220152241.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 17]: https://img-blog.csdnimg.cn/20210328220206619.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 18]: https://img-blog.csdnimg.cn/20210328220217904.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx,size_16,color_FFFFFF,t_70#pic_center