css 弹性布局

快来打我* 2023-10-06 23:19 33阅读 0赞

#### 阅读目录 ####

*  CSS flex 属性
 *   *  一、声明定义
     *   *  1 声明块级弹性盒子 display:flex
         *  2 声明内联级弹性盒子 display:inline-flex
     *  二、flex-direction：用于控制盒子元素排列的方向
     *   *  row-reverse 从右向左排列元素
         *  column-reverse 从下到上垂直排列元素
     *  三、flex-wrap
     *   *  行元素换行 row 、wrap
         *  水平排列反向换行 row 、wrap-reverse
         *  垂直元素换行 column 、wrap
         *  垂直元素反向换行 column wrap-reverse
     *  四、flex-flow
 *  轴说明
 *   *  水平排列
     *  垂直排列
     *  justify-content
     *   *  水平排列元素，并使用 justify-content: flex-end 对齐到主轴终点
         *  使用 space-evenly 平均分配容器元素
         *  垂直排列时对齐到主轴终点
     *  交叉轴行
     *   *  align-items 用于控制容器元素在交叉轴上的排列方式
         *   *  （1）横向排列
             *  （2）纵向排列
         *  align-content 只适用于多行显示的弹性容器，用于控制行（而不是元素）在交叉轴上的排列方式
         *   *  水平排列在交叉轴中居中排列
             *  垂直排列时交叉轴的排列
     *  弹性元素
     *   *  1. align-self

## CSS flex 属性 ##

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title>
    <style> 
    #main
    {
          
    	width:220px;
    	height:300px;
    	border:1px solid black;
    	display:flex;
    }
    
    #main div
    {
          
    	flex:1;
    }
    </style>
    </head>
    <body>
    
    <div id="main">
      <div style="background-color:coral;">红色</div>
      <div style="background-color:lightblue;">蓝色</div>  
      <div style="background-color:lightgreen;">带有更多内容的绿色 div</div>
    </div>
    
    <p><b>注意:</b> Internet Explorer 9 及更早版本不支持 flex 属性。</p>
    <p><b>注意:</b> Internet Explorer 10 通过 -ms-flex 属性来支持。 IE11 及更新版本完全支持 flex 属性 (不需要 -ms- 前缀)。</p>
    <p><b>注意:</b> Safari 6.1 (及更新浏览器) 通过 -webkit-flex 属性支持。</p>
    
    </body>
    </html>

![在这里插入图片描述][40739ccb326a4458930076009bd5a2cb.png]

### 一、声明定义 ###

容器盒子里面包含着容器元素，使用 `display:flex` 或 `display:inline-flex` 声明为弹性盒子。

#### 1 声明块级弹性盒子 display:flex ####

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style>
            * {
          
                padding: 0;
                margin: 0;
            }
     
            article {
          
                height: 150px;
                margin-left: 100px;
                margin-top: 100px;
                outline: solid 5px silver;
                display: flex;
                padding: 20px;
            }
     
            article div {
          
                outline: solid 5px orange;
                text-align: center;
                font-size: 28px;
                line-height: 5em;
                width: 300px;
            }
        </style>
    </head>
    <body>
    
    	<article>
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </article>
    	
    </body>
    </html>

![在这里插入图片描述][7edbe986023e4da3aa6c063b91399065.png]

#### 2 声明内联级弹性盒子 display:inline-flex ####

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style>
            * {
          
                padding: 0;
                margin: 0;
            }
     
            article {
          
                height: 150px;
                margin-left: 100px;
                margin-top: 100px;
                outline: solid 5px silver;
                display: inline-flex;
                padding: 20px;
            }
     
            article div {
          
                outline: solid 5px orange;
                text-align: center;
                font-size: 28px;
                line-height: 5em;
                width: 300px;
            }
        </style>
    </head>
    <body>
    
    	<article>
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </article>
    	
    </body>
    </html>

![在这里插入图片描述][20e4f964142a43c5981a64e8a61b893b.png]

### 二、flex-direction：用于控制盒子元素排列的方向 ###

使用在 `display:flex` 的父容器里，改变横轴的方向：

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>row</td> 
   <td>从左到右水平排列元素（默认值）</td> 
  </tr> 
  <tr> 
   <td>row-reverse</td> 
   <td>从右向左排列元素</td> 
  </tr> 
  <tr> 
   <td>column</td> 
   <td>从上到下垂直排列元素</td> 
  </tr> 
  <tr> 
   <td>column-reverse</td> 
   <td>从下到上垂直排列元素</td> 
  </tr> 
 </tbody> 
</table>

#### row-reverse 从右向左排列元素 ####

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style>
    	   * {
          
    		  padding: 0;
    		  margin: 0;
    		}
    		body {
          
    		  margin: 100px;
    		  font-size: 14px;
    		  color: #555;
    		}
    		article {
          
    		  width: 500px;
    		  border: solid 5px silver;
    		  display: flex;
    		  box-sizing: border-box;
    		  padding: 10px;
    		 /* row-reverse   从右向左排列元素 */
    		  flex-direction: row-reverse;
    		}
    		article * {
          
    		  border: solid 5px orange;
    		  padding: 10px;
    		  margin: 10px;
    		}
        </style>
    </head>
    <body>
    
    	<article>
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </article>
    	
    </body>
    </html>

![在这里插入图片描述][cabaa1ce86ae4539ba276e7be4752cfc.png]

#### column-reverse 从下到上垂直排列元素 ####

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style>
    		* {
          
              padding: 0;
              margin: 0;
            }
            body {
          
              margin: 100px;
              font-size: 14px;
              color: #555;
            }
            article {
          
              width: 500px;
              border: solid 5px silver;
              display: flex;
              box-sizing: border-box;
              padding: 10px;
             /* column-reverse  从下到上垂直排列元素 */
              flex-direction: column-reverse;
            }
            article * {
          
              border: solid 5px orange;
              padding: 10px;
              margin: 10px;
            }
        </style>
    </head>
    <body>
    
    	<article>
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </article>
    	
    </body>
    </html>

![在这里插入图片描述][e023df2a5e0a40d9a0ab7a7e0525e950.png]

### 三、flex-wrap ###

规定 flex 容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

<table> 
 <thead> 
  <tr> 
   <th>选项</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>nowrap</td> 
   <td>元素不拆行或不拆列（默认值）</td> 
  </tr> 
  <tr> 
   <td>wrap</td> 
   <td>容器元素在必要的时候拆行或拆列。</td> 
  </tr> 
  <tr> 
   <td>wrap-reverse</td> 
   <td>容器元素在必要的时候拆行或拆列，但是以相反的顺序</td> 
  </tr> 
 </tbody> 
</table>

#### 行元素换行 row 、wrap ####

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style>
    		* {
          
                padding: 0;
                margin: 0;
                outline: solid 1px silver;
                padding: 10px;
                margin: 10px;
            }
            head {
          
                display: block;
    			background:#eee;
            }
            body {
          
                font-size: 14px;
                color: #555;
            }
            article {
          
                width: 500px;
                height: 250px;
                border: solid 5px silver;
                box-sizing: border-box;
                padding: 10px;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
            }
            article div {
          
                border: solid 5px orange;
                padding: 30px 80px;
                margin: 10px;
                text-align: center;
                font-size: 28px;
            }
        </style>
    </head>
    <body>
    
    	<article>
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </article>
    	
    </body>
    </html>

![在这里插入图片描述][2ea7574df892402587ecb6500d5537e1.png]

#### 水平排列反向换行 row 、wrap-reverse ####

flex-direction: row;
    flex-wrap: wrap-reverse;

![在这里插入图片描述][c47a1368ca894999aee3dc2aa9eba804.png]

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style>
    		* {
          
                padding: 0;
                margin: 0;
                outline: solid 1px silver;
                padding: 10px;
                margin: 10px;
            }
            head {
          
                display: block;
    			background:#eee;
            }
            body {
          
                font-size: 14px;
                color: #555;
            }
            article {
          
                width: 500px;
                height: 250px;
                border: solid 5px silver;
                box-sizing: border-box;
                padding: 10px;
                display: flex;
                flex-direction: row;
    			flex-wrap: wrap-reverse;
            }
            article div {
          
                border: solid 5px orange;
                padding: 30px 80px;
                margin: 10px;
                text-align: center;
                font-size: 28px;
            }
        </style>
    </head>
    <body>
    
    	<article>
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </article>
    	
    </body>
    </html>

#### 垂直元素换行 column 、wrap ####

flex-direction: column;
    flex-wrap: wrap;

![在这里插入图片描述][c9af0f7eb0d34ae5bea329a43522ed20.png]

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style>
    		* {
          
                padding: 0;
                margin: 0;
                outline: solid 1px silver;
                padding: 10px;
                margin: 10px;
            }
            head {
          
                display: block;
    			background:#eee;
            }
            body {
          
                font-size: 14px;
                color: #555;
            }
            article {
          
                width: 500px;
                height: 350px;
                border: solid 5px silver;
                box-sizing: border-box;
                padding: 10px;
                display: flex;
                flex-direction: column;
    			flex-wrap: wrap;
            }
            article div {
          
                border: solid 5px orange;
                padding: 30px 80px;
                margin: 10px;
                text-align: center;
                font-size: 28px;
            }
        </style>
    </head>
    <body>
    
    	<article>
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </article>
    	
    </body>
    </html>

#### 垂直元素反向换行 column wrap-reverse ####

flex-direction: column;
    flex-wrap: wrap-reverse;

![在这里插入图片描述][c9a0d619d7d64cdea4fc4c6c624e3cb2.png]

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style>
    		* {
          
                padding: 0;
                margin: 0;
                outline: solid 1px silver;
                padding: 10px;
                margin: 10px;
            }
            head {
          
                display: block;
    			background:#eee;
            }
            body {
          
                font-size: 14px;
                color: #555;
            }
            article {
          
                width: 500px;
                height: 350px;
                border: solid 5px silver;
                box-sizing: border-box;
                padding: 10px;
                display: flex;
                flex-direction: column;
    			flex-wrap: wrap-reverse;
            }
            article div {
          
                border: solid 5px orange;
                padding: 30px 80px;
                margin: 10px;
                text-align: center;
                font-size: 28px;
            }
        </style>
    </head>
    <body>
    
    	<article>
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </article>
    	
    </body>
    </html>

### 四、flex-flow ###

是 `flex-direction` 与 `flex-wrap` 的组合简写模式。

下面是从右向左排列，换行向上拆分行。

![在这里插入图片描述][1d08d72210e34f2e906b8b092c680573.png]

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style>
    		* {
          
                padding: 0;
                margin: 0;
                outline: solid 1px silver;
                padding: 10px;
                margin: 10px;
            }
            head {
          
                display: block;
    			background:#eee;
            }
            body {
          
                font-size: 14px;
                color: #555;
            }
            article {
          
                width: 500px;
                height: 350px;
                border: solid 5px silver;
                box-sizing: border-box;
                padding: 10px;
                display: flex;
                flex-flow: row-reverse wrap-reverse;
            }
            article div {
          
                border: solid 5px orange;
                padding: 30px 80px;
                margin: 10px;
                text-align: center;
                font-size: 28px;
            }
        </style>
    </head>
    <body>
    
    	<article>
            <div>1</div>
            <div>2</div>
            <div>3</div>
    		<div>4</div>
        </article>
    	
    </body>
    </html>

## 轴说明 ##

### 水平排列 ###

下面是使用 `flex-flow: row wrap` 的主轴与交叉轴说明。  
![在这里插入图片描述][dcf83c3a9f284d2f97a535850a5dee10.png]  
下面是使用 `flex-flow: row-reverse wrap-reverse` 的主轴与交叉轴说明。

![在这里插入图片描述][bac9c4d2477e42d99cae8237fc14cdb9.png]

### 垂直排列 ###

下面是使用 `flex-flow: column wrap` 的主轴与交叉轴说明。

![在这里插入图片描述][beae75e25de24245a5c5796714542fb8.png]

### justify-content ###

用于控制元素在主轴上的排列方式，再次强调是主轴的排列方式。

<table> 
 <thead> 
  <tr> 
   <th>选项</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>flex-start</td> 
   <td>元素紧靠主轴起点</td> 
  </tr> 
  <tr> 
   <td>flex-end</td> 
   <td>元素紧靠主轴终点</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>元素从弹性容器中心开始</td> 
  </tr> 
  <tr> 
   <td>space-between</td> 
   <td>第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间</td> 
  </tr> 
  <tr> 
   <td>space-around</td> 
   <td>每个元素两侧的间隔相等。所以，元素之间的间隔比元素与容器的边距的间隔大一倍</td> 
  </tr> 
  <tr> 
   <td>space-evenly</td> 
   <td>元素间距离平均分配</td> 
  </tr> 
 </tbody> 
</table>

#### 水平排列元素，并使用 justify-content: flex-end 对齐到主轴终点 ####

![在这里插入图片描述][73a244b55a6b487b86d9450d886d6659.png]

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style>
    	* {
          
    		padding: 0;
    		margin: 0;
    		padding: 10px;
    		margin: 10px;
    	  }
    	  body {
          
    		font-size: 14px;
    		color: #555;
    	  }
    	  article {
          
    		border: solid 5px silver;
    		box-sizing: border-box;
    		display: flex;
    		flex-flow: row wrap;
    		justify-content: flex-end;
    	  }
    	  article div {
          
    		width: 80px;
    		border: solid 5px orange;
    		text-align: center;
    		font-size: 28px;
    	  }
        </style>
    </head>
    <body>
    
    	<article>
            <div>1</div>
            <div>2</div>
            <div>3</div>
    		<div>4</div>
        </article>
    	
    </body>
    </html>

#### 使用 space-evenly 平均分配容器元素 ####

flex-flow: row wrap;
     justify-content: space-evenly;

![在这里插入图片描述][63688f789ec742569379076c4a0258d0.png]

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style>
    	* {
          
    		padding: 0;
    		margin: 0;
    		padding: 10px;
    		margin: 10px;
    	  }
    	  body {
          
    		font-size: 14px;
    		color: #555;
    	  }
    	  article {
          
    		border: solid 5px silver;
    		box-sizing: border-box;
    		display: flex;
    		flex-flow: row wrap;
    		justify-content: space-evenly;
    	  }
    	  article div {
          
    		width: 80px;
    		border: solid 5px orange;
    		text-align: center;
    		font-size: 28px;
    	  }
        </style>
    </head>
    <body>
    
    	<article>
            <div>1</div>
            <div>2</div>
            <div>3</div>
    		<div>4</div>
        </article>
    	
    </body>
    </html>

#### 垂直排列时对齐到主轴终点 ####

flex-flow: column wrap;
     justify-content: flex-end;

![在这里插入图片描述][a44ded67afc744039abcf90424c67d14.png]

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style>
    	* {
          
    		padding: 0;
    		margin: 0;
    		padding: 10px;
    		margin: 10px;
    	  }
    	  body {
          
    		font-size: 14px;
    		color: #555;
    	  }
    	  article {
          
    		border: solid 5px silver;
    		box-sizing: border-box;
    		display: flex;
    		flex-flow: column wrap;
    		justify-content: flex-end;
    	  }
    	  article div {
          
    		width: 80px;
    		border: solid 5px orange;
    		text-align: center;
    		font-size: 28px;
    	  }
        </style>
    </head>
    <body>
    
    	<article>
            <div>1</div>
            <div>2</div>
            <div>3</div>
    		<div>4</div>
        </article>
    	
    </body>
    </html>

### 交叉轴行 ###

#### align-items 用于控制容器元素在交叉轴上的排列方式 ####

<table> 
 <thead> 
  <tr> 
   <th>选项</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>stretch</td> 
   <td>元素被拉伸以适应容器（默认值）</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>元素位于容器的中心</td> 
  </tr> 
  <tr> 
   <td>flex-start</td> 
   <td>元素位于容器的交叉轴开头</td> 
  </tr> 
  <tr> 
   <td>flex-end</td> 
   <td>元素位于容器的交叉轴结尾</td> 
  </tr> 
 </tbody> 
</table>

##### （1）横向排列 #####

拉伸适应交叉轴

![在这里插入图片描述][c24ed3f82b4545a9b5fc8df89a5993b9.png]

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style>
    	* {
          
    		padding: 0;
    		margin: 0;
    		padding: 10px;
    		margin: 5px;
    	  }
    	  head {
          
    		display: block;
    	  }
    	  body {
          
    		font-size: 14px;
    		color: #555;
    	  }
    	  article {
          
    		height: 200px;
    		border: solid 5px silver;
    		box-sizing: border-box;
    		display: flex;
    		flex-direction: row;
    		align-items: stretch;
    	  }
    	  article div {
          
    		width: 80px;
    		border: solid 5px orange;
    		text-align: center;
    		font-size: 28px;
    	  }
        </style>
    </head>
    <body>
    
    	<article>
            <div>1</div>
            <div>2</div>
            <div>3</div>
    		<div>4</div>
        </article>
    	
    </body>
    </html>

对齐到交叉轴的顶部

flex-direction: row;
    align-items: flex-start;

![在这里插入图片描述][e98ea2036c4b4f30b091abddef80a6df.png]

对齐到交叉轴底部

flex-direction: row;
    align-items: flex-end;

![在这里插入图片描述][b19b7dc6da894047bc89df9de2f36370.png]

对齐到交叉轴中心

flex-direction: row;
    align-items: center;

![在这里插入图片描述][ce88c095ef2f41cda56720facfbd62ce.png]

##### （2）纵向排列 #####

纵向排列时交叉轴排列

![在这里插入图片描述][822c7d7d38a74cfe9fa552ad382ed81d.png]

#### align-content 只适用于多行显示的弹性容器，用于控制行（而不是元素）在交叉轴上的排列方式 ####

<table> 
 <thead> 
  <tr> 
   <th>选项</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>stretch</td> 
   <td>将空间平均分配给元素</td> 
  </tr> 
  <tr> 
   <td>flex-start</td> 
   <td>元素紧靠主轴起点</td> 
  </tr> 
  <tr> 
   <td>flex-end</td> 
   <td>元素紧靠主轴终点</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>元素从弹性容器中心开始</td> 
  </tr> 
  <tr> 
   <td>space-between</td> 
   <td>第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间</td> 
  </tr> 
  <tr> 
   <td>space-around</td> 
   <td>每个元素两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍</td> 
  </tr> 
  <tr> 
   <td>space-evenly</td> 
   <td>元素间距离平均分配</td> 
  </tr> 
 </tbody> 
</table>

##### 水平排列在交叉轴中居中排列 #####

![在这里插入图片描述][26c53979655d4b879348febfa32cf1c9.png]

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style>
    		* {
          
                padding: 0;
                margin: 0;
                padding: 10px;
                margin: 5px;
            }
            article {
          
                height: 300px;
                border: solid 5px silver;
                box-sizing: border-box;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                align-items: flex-start;
                align-content: center;
            }
            article div {
          
                width: 90px;
                border: solid 5px orange;
                text-align: center;
                font-size: 28px;
            }
        </style>
    </head>
    <body>
    
    	<article>
            <div>1</div>
            <div>2</div>
            <div>3</div>
    		<div>4</div>
        </article>
    	
    </body>
    </html>

##### 垂直排列时交叉轴的排列 #####

flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: center;

![在这里插入图片描述][63169b41fe6d4a7e9371020106737617.png]

### 弹性元素 ###

放在容器盒子中的元素即为容器元素。

不能使用 float 与 clear 规则
    弹性元素均为块元素
    绝对定位的弹性元素不参与弹性布局

#### 1. align-self ####

用于控制单个元素在交叉轴上的排列方式，`align-items` 用于控制容器中所有元素的排列，而 `align-self` 用于控制一个弹性元素的交叉轴排列。

![在这里插入图片描述][18c325f5625242c59927ea965838c35b.png]

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style>
    		* {
          
                padding: 0;
                margin: 0;
                padding: 10px;
                margin: 5px;
            }
            article {
          
                height: 400px;
                border: solid 5px silver;
                box-sizing: border-box;
                display: flex;
                flex-direction: row;
                align-items: center;
            }
            article div {
          
                height: 50px;
                min-width: 50px;
                border: solid 5px orange;
                text-align: center;
                font-size: 28px;
            }
            article div:nth-of-type(1) {
          
                /* 元素紧靠主轴起点 */
                align-self: flex-start;
            }
            article div:nth-of-type(3) {
          
                /* 	元素紧靠主轴终点 */
                align-self: flex-end;
            }
        </style>
    </head>
    <body>
    
    	<article>
            <div>1</div>
            <div>2</div>
            <div>3</div>
    		<div>4</div>
        </article>
    	
    </body>
    </html>

[40739ccb326a4458930076009bd5a2cb.png]: https://img-blog.csdnimg.cn/40739ccb326a4458930076009bd5a2cb.png
[7edbe986023e4da3aa6c063b91399065.png]: https://img-blog.csdnimg.cn/7edbe986023e4da3aa6c063b91399065.png
[20e4f964142a43c5981a64e8a61b893b.png]: https://img-blog.csdnimg.cn/20e4f964142a43c5981a64e8a61b893b.png
[cabaa1ce86ae4539ba276e7be4752cfc.png]: https://img-blog.csdnimg.cn/cabaa1ce86ae4539ba276e7be4752cfc.png
[e023df2a5e0a40d9a0ab7a7e0525e950.png]: https://img-blog.csdnimg.cn/e023df2a5e0a40d9a0ab7a7e0525e950.png
[2ea7574df892402587ecb6500d5537e1.png]: https://img-blog.csdnimg.cn/2ea7574df892402587ecb6500d5537e1.png
[c47a1368ca894999aee3dc2aa9eba804.png]: https://img-blog.csdnimg.cn/c47a1368ca894999aee3dc2aa9eba804.png
[c9af0f7eb0d34ae5bea329a43522ed20.png]: https://img-blog.csdnimg.cn/c9af0f7eb0d34ae5bea329a43522ed20.png
[c9a0d619d7d64cdea4fc4c6c624e3cb2.png]: https://img-blog.csdnimg.cn/c9a0d619d7d64cdea4fc4c6c624e3cb2.png
[1d08d72210e34f2e906b8b092c680573.png]: https://img-blog.csdnimg.cn/1d08d72210e34f2e906b8b092c680573.png
[dcf83c3a9f284d2f97a535850a5dee10.png]: https://img-blog.csdnimg.cn/dcf83c3a9f284d2f97a535850a5dee10.png
[bac9c4d2477e42d99cae8237fc14cdb9.png]: https://img-blog.csdnimg.cn/bac9c4d2477e42d99cae8237fc14cdb9.png
[beae75e25de24245a5c5796714542fb8.png]: https://img-blog.csdnimg.cn/beae75e25de24245a5c5796714542fb8.png
[73a244b55a6b487b86d9450d886d6659.png]: https://img-blog.csdnimg.cn/73a244b55a6b487b86d9450d886d6659.png
[63688f789ec742569379076c4a0258d0.png]: https://img-blog.csdnimg.cn/63688f789ec742569379076c4a0258d0.png
[a44ded67afc744039abcf90424c67d14.png]: https://img-blog.csdnimg.cn/a44ded67afc744039abcf90424c67d14.png
[c24ed3f82b4545a9b5fc8df89a5993b9.png]: https://img-blog.csdnimg.cn/c24ed3f82b4545a9b5fc8df89a5993b9.png
[e98ea2036c4b4f30b091abddef80a6df.png]: https://img-blog.csdnimg.cn/e98ea2036c4b4f30b091abddef80a6df.png
[b19b7dc6da894047bc89df9de2f36370.png]: https://img-blog.csdnimg.cn/b19b7dc6da894047bc89df9de2f36370.png
[ce88c095ef2f41cda56720facfbd62ce.png]: https://img-blog.csdnimg.cn/ce88c095ef2f41cda56720facfbd62ce.png
[822c7d7d38a74cfe9fa552ad382ed81d.png]: https://img-blog.csdnimg.cn/822c7d7d38a74cfe9fa552ad382ed81d.png
[26c53979655d4b879348febfa32cf1c9.png]: https://img-blog.csdnimg.cn/26c53979655d4b879348febfa32cf1c9.png
[63169b41fe6d4a7e9371020106737617.png]: https://img-blog.csdnimg.cn/63169b41fe6d4a7e9371020106737617.png
[18c325f5625242c59927ea965838c35b.png]: https://img-blog.csdnimg.cn/18c325f5625242c59927ea965838c35b.png