Flex布局基础

柔光的暖阳◎ 2023-10-01 09:13 16阅读 0赞

### 概念：什么是Flex？ ###

FlexiableBox即是弹性盒子，用来进行弹性布局，可以配合rem处理尺寸的适配问题

### 为什么使用Flex布局？ ###

1，用来为盒状模型提供最大的灵活性。任何容器都可以指定为Flex布局（使用display属性）

即：**display:flex;**

2，更加符合响应式设计的特点

虽然说，我们在进行前端布局时，可以使用position、float等属性满足我们的所有需求，但是代码量大且不够灵活

### 初识Flex ###

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAQSBwZXJzb24sQSBmb29s_size_20_color_FFFFFF_t_70_g_se_x_16][]

每个弹性容器都有两根轴：**主轴和交叉轴**，两轴之间成90度关系（弹性容器的两根轴非常重要，所有属性都是作用于轴的），上图是Flex非常经典的一个图，其实想成我们数学中学的X轴和Y轴就很好理解，比如说水平方向是主轴（main axis），那么垂直方向就是交叉轴（cross axis）。

比如说盒子里面的子元素是水平排列的，x轴就称之为主轴，y轴就称之为交叉轴，反之，如果盒子里面的子元素是纵向排列的，那么y轴则称之为主轴，x轴则称之为交叉轴，也就是**以子元素的排列方向为基准分主轴和交叉轴。**

另外还有四个顶点，比如说main start（主轴的开始）、main end（主轴的结束）、cross start（交叉轴的开始）、cross end（交叉轴的结束）；还有一个交叉点。

子元素占主轴的空间是main size和占交叉轴的空间是cross size（不能简单理解为子元素的宽度和高度）

### Flex的属性 ###

#### 1，flex-direction 作用：子元素在父元素盒子中的排列顺序 ####

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td style="width:121px;">属性值</td> 
   <td style="width:377px;">作用</td> 
  </tr> 
  <tr> 
   <td style="width:121px;">row</td> 
   <td style="width:377px;">默认值。按从左到右的顺序显示</td> 
  </tr> 
  <tr> 
   <td style="width:121px;">row-reverse</td> 
   <td style="width:377px;">与row相同，但是以相反的顺序</td> 
  </tr> 
  <tr> 
   <td style="width:121px;">column</td> 
   <td style="width:377px;">垂直显示，按从上到下的顺序</td> 
  </tr> 
  <tr> 
   <td style="width:121px;">column-reverse</td> 
   <td style="width:377px;">与column相同，但是以相反的顺序</td> 
  </tr> 
 </tbody> 
</table>

<html>
        <head>
            <title>Flex示例</title>
            <style>
                #div0{
                    width:500px;
                    background-color: red;
                    display: flex;
                    flex-direction: row;
                }
                #div0 div{
                    width: 100px;
                    height: 100px;
                    background-color: yellow;
                }
            </style>
        </head>
        <body>
            <div id="div0">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
            </div>
        </body>
    </html>

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAQSBwZXJzb24sQSBmb29s_size_16_color_FFFFFF_t_70_g_se_x_16][]如果是flex-direction:row-reverse;就会反向排列 ，如果是column就会垂直排列，这里就不一一贴图了。

#### 2，flex-wrap 作用：子元素在父元素盒子中的是否换行（列） ####

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>属性值</td> 
   <td>作用</td> 
  </tr> 
  <tr> 
   <td>nowrap</td> 
   <td>默认值。不换行或不换列，如果超过直接溢出</td> 
  </tr> 
  <tr> 
   <td>wrap</td> 
   <td>换行或换列，如果超过一行则另起一行或一列显示</td> 
  </tr> 
  <tr> 
   <td>wrap-reverse</td> 
   <td>和wrap相同，但是以相反的顺序显示</td> 
  </tr> 
 </tbody> 
</table>

<html>
        <head>
            <title>Flex示例</title>
            <style>
                #div0{
                    width:380px;/*将父元素的宽度改为380*/
                    background-color: red;
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap-reverse;/*设置为换行且顺序相反*/
                }
                #div0 div{
                    width: 100px;
                    height: 100px;
                    background-color: yellow;
                }
            </style>
        </head>
        <body>
            <div id="div0">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
            </div>
        </body>
    </html>

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAQSBwZXJzb24sQSBmb29s_size_14_color_FFFFFF_t_70_g_se_x_16][]

这里需要注意的是：如果剩余空间不满足余下的子元素就会换行，如果不设置换行的话，也就是说仅仅只设置：

display: flex;

flex-direction: row;

会自动调整子元素的大小，使得刚好在范围内，当然子元素的大小还是要设置。

#### 3，flex-flow 作用：flex-direction和flex-wrap属性的简写形式 ####

语法：flex-flow:<flex-dorection> || <flex-wrap>

例如：flex-flow:row wrap-reverse;

#### 4，justify-content 作用：用来在存在剩余空间时，设置为间距的方式 ####

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td style="width:132px;">属性值</td> 
   <td style="width:366px;">作用</td> 
  </tr> 
  <tr> 
   <td style="width:132px;">flex-start</td> 
   <td style="width:366px;">默认值。从左到右，挨着行的开头</td> 
  </tr> 
  <tr> 
   <td style="width:132px;">flex-end</td> 
   <td style="width:366px;">从右到左，挨着行的结尾</td> 
  </tr> 
  <tr> 
   <td style="width:132px;">center</td> 
   <td style="width:366px;">居中显示</td> 
  </tr> 
  <tr> 
   <td style="width:132px;">space-between</td> 
   <td style="width:366px;">平均分布在该行上，两边不留间隔空间</td> 
  </tr> 
  <tr> 
   <td style="width:132px;">space-around</td> 
   <td style="width:366px;">平均分布在该行上，两边留有一半的间隔空间</td> 
  </tr> 
 </tbody> 
</table>

<html>
        <head>
            <title>Flex示例</title>
            <style>
                #div0{
                    width:380px;/*将父元素的宽度改为380*/
                    background-color: red;
                    display: flex;
                    flex-direction: row;
                    flex-flow: row wrap;
                    justify-content: space-between;
                }
                #div0 div{
                    width: 100px;
                    height: 100px;
                    background-color: yellow;
                }
            </style>
        </head>
        <body>
            <div id="div0">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
            </div>
        </body>
    </html>

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAQSBwZXJzb24sQSBmb29s_size_12_color_FFFFFF_t_70_g_se_x_16][]

如果是父元素中：justify-content：space-around;

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAQSBwZXJzb24sQSBmb29s_size_11_color_FFFFFF_t_70_g_se_x_16][]

如果我们想要设置上下的间距的话，就可以在子元素中加入：margin-top:10px;

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAQSBwZXJzb24sQSBmb29s_size_11_color_FFFFFF_t_70_g_se_x_16 1][]

也就是说，在flex中我们依然可以使用之前的css样式

#### 5，align-items 作用： 设置每个flex元素在交叉轴上的默认对齐方式 ####

理解：如果x轴是主轴，y轴就是交叉轴，如果y轴是主轴，x轴就是交叉轴；如果y轴是交叉轴，那么对齐方式就是“上中下”，如果x轴是交叉轴，那么对齐方式就是“左中右”。

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td style="width:145px;">属性值</td> 
   <td style="width:354px;">作用</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">flex-start</td> 
   <td style="width:354px;">位于容器的开头</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">flex-end</td> 
   <td style="width:354px;">位于容器的结尾</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">center</td> 
   <td style="width:354px;">位于容器的中心</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">space-between</td> 
   <td style="width:354px;">子元素之间留有空白</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">space-around</td> 
   <td style="width:354px;">两端都留有空白</td> 
  </tr> 
 </tbody> 
</table>

主轴为X轴，交叉轴是y轴（如图1）

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAQSBwZXJzb24sQSBmb29s_size_13_color_FFFFFF_t_70_g_se_x_16][]图1![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAQSBwZXJzb24sQSBmb29s_size_12_color_FFFFFF_t_70_g_se_x_16 1][]图2

如果将主轴改为y轴，flex-direction:column;则如图2

如果父元素的宽度一行不能放下所有子元素，则:

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAQSBwZXJzb24sQSBmb29s_size_11_color_FFFFFF_t_70_g_se_x_16 2][]

注意：之前可能大家有了解到，align-items只能处理单行，不能处理多行，这里是一个理解的问题，align-items只能处理单行是指把所有的子元素的每一行当做一个独立的个体去处理

#### 6，align-content 作用：设置每个flex元素在交叉轴上的默认对齐方式 ####

注意：align-content与align-items有很多相同的地方，都是用来控制在交叉轴上的对齐方式的，但是不同的是align-content是将**多行的内容当做一个整体**去处理的

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAQSBwZXJzb24sQSBmb29s_size_13_color_FFFFFF_t_70_g_se_x_16 1][]可以很明显的看到与align-items的区别

也就是说，**如果我们是要将多行的每一行单独处理，那么就用align-items，如果是将多行当一个整体，那么就用align-content**

#### 7，其他属性（在子元素中进行设置） ####

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td style="width:93px;"><span style="color:#0d0016;">属性</span></td> 
   <td style="width:405px;"><span style="color:#0d0016;">作用</span></td> 
  </tr> 
  <tr> 
   <td style="width:93px;"><span style="color:#0d0016;">flex-basis</span></td> 
   <td style="width:405px;"><span style="color:#0d0016;">设置弹性盒子伸缩的基准值（也就是子元素的宽度）</span></td> 
  </tr> 
  <tr> 
   <td style="width:93px;"><span style="color:#0d0016;">flex-grow</span></td> 
   <td style="width:405px;"><span style="color:#0d0016;">设置弹性盒子的扩展比率</span></td> 
  </tr> 
  <tr> 
   <td style="width:93px;"><span style="color:#0d0016;">flex-shrink</span></td> 
   <td style="width:405px;"><span style="color:#0d0016;">设置弹性盒子的缩小比率</span></td> 
  </tr> 
  <tr> 
   <td style="width:93px;"><span style="color:#0d0016;">flex</span></td> 
   <td style="width:405px;"><span style="color:#0d0016;">以上三个属性的缩写</span></td> 
  </tr> 
 </tbody> 
</table>

<html>
        <head>
            <title>flex</title>
            <style>
                #div0{
                    width:400px;
                    height: 500px;
                    background-color: red;
                    display: flex;
                }
                #div0 div{
                    width: 200px;/*设置基准值之后，原先设置的宽度就无效了*/
                    height: 200px;
                    background-color: yellow;
                    flex-basis: 50px;/*这里也可以设置百分比，比如30%，要注意这里是父元素的30%*/
                }
            </style>
        </head>
        <body>
            <div id="div0">
                <div>1</div>
                <div>2</div>
            </div>
        </body>
    </html>

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAQSBwZXJzb24sQSBmb29s_size_12_color_FFFFFF_t_70_g_se_x_16 2][]

**flex-grow**，主要是对于子元素不足以填充父元素的宽度的情况（**有剩余空间**的时候）

例如：flex-grow:1;表示如果需要扩充，大于1的值代表允许扩充，表示所占的份数

比如说第一个子元素flex-grow：1，第二个子元素flex-grow：3；表示一共分为4份，第一个占了1份，第二个占了3份。

<html>
        <head>
            <title>flex</title>
            <style>
                #div0{
                    width:400px;/*将父元素的宽度改为400*/
                    height: 500px;
                    background-color: red;
                    display: flex;
                }
                #div0 div{
                    width: 200px;
                    height: 200px;
                    background-color: yellow;
                }
                #div0 div:nth-child(1){
                    flex-basis: 50px;
                    flex-grow: 1;
                }
                #div0 div:nth-child(2){
                    flex-basis: 100px;
                    flex-grow: 1;
                }
            </style>
        </head>
        <body>
            <div id="div0">
                <div>1</div>
                <div>2</div>
            </div>
        </body>
    </html>

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAQSBwZXJzb24sQSBmb29s_size_11_color_FFFFFF_t_70_g_se_x_16 3][]

**flex-shrink**：是用来设置缩小的比率的，是针对子元素比较宽，父元素的宽度显示不下的情况，与flex-grow是类似的

例如:flex-shrink:0; 0代表不允许缩小，就会超出

flex-shrink：1；flex-shrink：3；

**flex：flex-grow flex-shrink flex-basis；（注意顺序）**

特殊写法：

#### 8，子元素属性align-self ####

作用：与align-items类似，但是它只处理子元素它本身的对齐方式

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAQSBwZXJzb24sQSBmb29s_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/c2bf6a38bfec4a4f9f1f9c93c60f52fa.jpg?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAQSBwZXJzb24sQSBmb29s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAQSBwZXJzb24sQSBmb29s_size_16_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/057a8dc571fc432dbc484681029fa368.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAQSBwZXJzb24sQSBmb29s,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAQSBwZXJzb24sQSBmb29s_size_14_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/cfde369a805b47278f924a3e731f699d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAQSBwZXJzb24sQSBmb29s,size_14,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAQSBwZXJzb24sQSBmb29s_size_12_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f453803d8c894bf3a8fa472b0655a69e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAQSBwZXJzb24sQSBmb29s,size_12,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAQSBwZXJzb24sQSBmb29s_size_11_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/5a1dcac65c3449848e2e54af495055f8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAQSBwZXJzb24sQSBmb29s,size_11,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAQSBwZXJzb24sQSBmb29s_size_11_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/116511bcea59437ea14ea98790c0ceeb.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAQSBwZXJzb24sQSBmb29s,size_11,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAQSBwZXJzb24sQSBmb29s_size_13_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/b5591a1b13284676a88a9e9492bb25ab.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAQSBwZXJzb24sQSBmb29s,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAQSBwZXJzb24sQSBmb29s_size_12_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/91f66dcb686c4d399fbe58db8761c041.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAQSBwZXJzb24sQSBmb29s,size_12,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAQSBwZXJzb24sQSBmb29s_size_11_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/cf99acbe751741759a94c4cc82290f6b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAQSBwZXJzb24sQSBmb29s,size_11,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAQSBwZXJzb24sQSBmb29s_size_13_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/cbaa13f6fc0a4e79be8b5ea230cc6976.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAQSBwZXJzb24sQSBmb29s,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAQSBwZXJzb24sQSBmb29s_size_12_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/01901383114b4af2a78fff14292ae60f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAQSBwZXJzb24sQSBmb29s,size_12,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAQSBwZXJzb24sQSBmb29s_size_11_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/111465ca2f754ea1bd1ba6c9e79b68b3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAQSBwZXJzb24sQSBmb29s,size_11,color_FFFFFF,t_70,g_se,x_16