Flex布局实战

本是古典何须时尚 2024-03-01 03:56 27阅读 0赞

### Flex布局简介 ###

Flex布局是一种用于网页布局的现代CSS布局模型。它使用flex容器和flex项来实现灵活的、响应式的布局。Flex容器是父元素，内部包含一系列的flex项。Flex项可以根据指定的规则自动调整尺寸和位置，以适应不同的屏幕大小和设备类型。

### Flex布局初概念 ###

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

Flex布局，全称Flexible Box布局，是一种在CSS3中引入的新的布局方式。

采用Flex布局的元素被称为Flex项目（Flex items），这些元素在Flex容器（Flex container）内部自动成为其成员。Flex容器可以包含一个或多个Flex项目。

Flex布局的主要特点在于其具有两根轴：主轴和侧轴。主轴的起始位置与边框的交叉点被称为main start，结束位置被称为main end；侧轴的起始位置叫做cross start，结束位置叫做cross end。

Flex项目在主轴上默认是线性排列的，而在交叉轴上的排列则由flex-direction属性定义，该属性有四个可能的值：row（默认值，项目从左向右排列）、row-reverse（项目从右向左排列）、column（项目从上向下排列）和column-reverse（项目从下向上排列）。

此外，Flex容器可以设置其子元素的弹性空间（flex space），并通过flex-grow和flex-shrink属性来控制其子元素如何分配这些空间。

Flex布局的使用可以简化传统布局中一些复杂的布局问题，使得页面在不同屏幕和设备上呈现出最佳效果。

### Flex布局设置 ###

### 1、Flex布局属性及其作用和属性值以及描述 ###

<table> 
 <thead> 
  <tr> 
   <th align="center">属性名</th> 
   <th align="center">作用</th> 
   <th align="center">属性值</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">display</td> 
   <td align="center">用于将元素设置为弹性盒子或行内弹性盒子</td> 
   <td align="center">flex</td> 
   <td align="center">将元素设置为弹性盒子</td> 
  </tr> 
  <tr> 
   <td align="center">flex-direction</td> 
   <td align="center">定义主轴的方向，决定子元素如何在主轴上排列</td> 
   <td align="center">row 、row-reverse、column、column-reverse</td> 
   <td align="center">设置主轴的方向为水平方向或垂直方向，或它们的反向方向</td> 
  </tr> 
  <tr> 
   <td align="center">justify-content</td> 
   <td align="center">定义在主轴上的对齐方式，决定子元素如何沿着主轴排列</td> 
   <td align="center">flex-start, center, flex-end, space-between, space-around, space-evenly</td> 
   <td align="center">设置子元素在主轴上的对齐方式，如起点、中心、终点或均匀分布</td> 
  </tr> 
  <tr> 
   <td align="center">align-items</td> 
   <td align="center">定义在侧轴上的对齐方式，决定子元素如何沿着侧轴排列</td> 
   <td align="center">flex-start, center, flex-end,baseline, stretch</td> 
   <td align="center">设置子元素在侧轴上的对齐方式，如顶部对齐、底部对齐、中心对齐或按比例填充空间</td> 
  </tr> 
  <tr> 
   <td align="center">flex-wrap</td> 
   <td align="center">控制子元素是否换行，默认为nowrap，还有wrap和wrap-reverse可选</td> 
   <td align="center">nowrap, wrap, wrap-reverse</td> 
   <td align="center">控制子元素是否换行排列，或不换行反向排列</td> 
  </tr> 
  <tr> 
   <td align="center">flex-flow</td> 
   <td align="center">是flex-direction和flex-wrap的简写形式，用于设置主轴和侧轴的对齐方式</td> 
   <td align="center">[row](javascript:void(0)) [nowrap](javascript:void(0)) 、 [row](javascript:void(0)) [wrap](javascript:void(0)) 、 [row](javascript:void(0)) [wrap-reverse](javascript:void(0)) 、 [column](javascript:void(0)) [nowrap](javascript:void(0)) 、 [column](javascript:void(0)) [wrap](javascript:void(0)) 、 [column](javascript:void(0)) [wrap-reverse](javascript:void(0))</td> 
   <td align="center">设置主轴和侧轴的对齐方式，包括是否换行排列</td> 
  </tr> 
  <tr> 
   <td align="center">align-content</td> 
   <td align="center">当子元素在侧轴上有多行时，用于定义它们的对齐方式</td> 
   <td align="center">flex-start, center, flex-end, space-between, space-around, space-evenly</td> 
   <td align="center">当子元素有多行时，设置它们在侧轴上的对齐方式，如顶部对齐、底部对齐、中心对齐或均匀分布</td> 
  </tr> 
  <tr> 
   <td align="center">flex-grow</td> 
   <td align="center">用于设置元素的弹性空间，正值表示可以放大，0表示不放大</td> 
   <td align="center">number (如 1, 2, …) 或 0 (default)</td> 
   <td align="center">设置元素的弹性空间因子，可以放大元素的空间占用比例</td> 
  </tr> 
  <tr> 
   <td align="center">flex-shrink</td> 
   <td align="center">用于设置元素的弹性收缩，正值表示可以缩小，0表示不缩小</td> 
   <td align="center">number (如 1, 2, …) 或 0 (default)</td> 
   <td align="center">设置元素的弹性收缩因子，可以缩小元素的空间占用比例</td> 
  </tr> 
  <tr> 
   <td align="center">flex-basis</td> 
   <td align="center">用于设置元素的基本尺寸，类似于宽度或高度，但可被弹性空间调整</td> 
   <td align="center">length (如 20px, 5em,) 或 auto (default)</td> 
   <td align="center">设置元素的基本尺寸，可以影响弹性空间占用的尺寸比例</td> 
  </tr> 
 </tbody> 
</table>

### 2、创建小程序项目 ###

1.  在 index.wxml文件中添加如下标签

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

代码：

<navigation-bar title="Weixin" back="{
         {false}}" color="black" background="#FFF"></navigation-bar>
    <view class="flex">
      <view>1</view>
      <view>2</view>
      <view>3</view>
    </view>

1.  在index.wxss文件中添加如下样式

![7f035624e0224511a5cbc2fb5b1da710.png][]

代码：

.flex {
        
         width: 320px;
         height: 460px;
         background-color: pink;
    }
    
    .flex view {
        
         width: 80px;
         height: 80px;
         background-color: gray;
         color: wheat;
         text-align: center;
         border: 1px solid #e4e4e4;
         box-sizing: border-box;
    }

添加了上面的标签和样式，接下来就可以进行Flex布局了。

### 3、设置在主轴上的排列方式 ###

#### 3.1 justify-content属性和属性值以及作用 ####

默认情况下，主轴的方向是从左到右。在主轴方向上，可以通过 **justify-content** 属性来设置他们的排列方式。justify-content常用的属性值有以下几种：

<table> 
 <thead> 
  <tr> 
   <th align="center">属性名</th> 
   <th align="center">属性值</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">justify-content</td> 
   <td align="center">flex-start</td> 
   <td align="center">主轴从起点开始排列，第一个子元素在左边，默认排列。</td> 
  </tr> 
  <tr> 
   <td align="center">justify-content</td> 
   <td align="center">flex-end</td> 
   <td align="center">主轴从终点开始排列，最后一个子元素在右边。</td> 
  </tr> 
  <tr> 
   <td align="center">justify-content</td> 
   <td align="center">center</td> 
   <td align="center">主轴所有子元素盒子水平居中。</td> 
  </tr> 
  <tr> 
   <td align="center">justify-content</td> 
   <td align="center">space-around</td> 
   <td align="center">主轴控制所有子元素盒子间距相等，左右两边子元素到容器边缘的距离相等。</td> 
  </tr> 
  <tr> 
   <td align="center">justify-content</td> 
   <td align="center">space-between</td> 
   <td align="center">第一个和最后一个子元素盒子分别靠在主轴的两端，中间子元素盒子之间的距离相等。</td> 
  </tr> 
  <tr> 
   <td align="center">justify-content</td> 
   <td align="center">space-evenly</td> 
   <td align="center">主轴上所有子元素盒子之间的距离相等，第一个和最后一个子元素盒子到容器边缘的距离相等。</td> 
  </tr> 
 </tbody> 
</table>

#### 3.2 flex-start ####

子元素在父元素的左侧排列,默认排列

在index.wxss文件中.flex类样式中设置主轴排列方式为 justify-content: flex-start; 效果如下所示。

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

#### 3.3 flex-end ####

子元素在父元素的右侧排列

修改index.wxss文件中的.flex类样式中justify-content的值为flex-end; 效果如下所示。

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

#### 3.4 center ####

子元素在父元素的中间排列

修改index.wxss文件中的.flex类样式中justify-content的值为center; 效果如下所示。

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

#### 3.5 space-around ####

主轴控制所有子元素盒子间距相等，左右两边子元素到容器边缘的距离相等

修改index.wxss文件中的.flex类样式中justify-content的值为space-around; 效果如下所示。

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

#### 3.6 space-between ####

第一个和最后一个子元素盒子分别靠在主轴的两端，中间子元素盒子之间的距离相等。

修改index.wxss文件中的.flex类样式中justify-content的值为space-between; 效果如下所示。

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

#### 3.7 space-evenly ####

主轴上所有子元素盒子之间的距离相等，第一个和最后一个子元素盒子到容器边缘的距离相等。

修改index.wxss文件中的.flex类样式中justify-content的值为space-evenly; 效果如下所示。

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

### 4、设置在侧轴上的排列方式 ###

#### 4.1 align-items属性和属性值以及作用 ####

默认情况下，侧轴的方向是从上到下。在侧轴方向上，可以通过 **align-items** 属性来设置他们的排列方式。align-items常用的属性值有以下几种：

<table> 
 <thead> 
  <tr> 
   <th align="center">属性名</th> 
   <th align="center">属性值</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">align-items</td> 
   <td align="center">flex-start</td> 
   <td align="center">侧轴上的子元素对齐到起点，默认排列</td> 
  </tr> 
  <tr> 
   <td align="center">align-items</td> 
   <td align="center">flex-end</td> 
   <td align="center">侧轴上的子元素对齐到终点</td> 
  </tr> 
  <tr> 
   <td align="center">align-items</td> 
   <td align="center">center</td> 
   <td align="center">侧轴上的子元素在容器中居中对齐</td> 
  </tr> 
  <tr> 
   <td align="center">align-items</td> 
   <td align="center">stretch</td> 
   <td align="center">侧轴上的子元素沿主轴方向拉伸以填满容器</td> 
  </tr> 
  <tr> 
   <td align="center">align-items</td> 
   <td align="center">baseline</td> 
   <td align="center">基线对齐</td> 
  </tr> 
 </tbody> 
</table>

#### 4.2 flex-start ####

侧轴上的子元素对齐到起点，默认排列

在index.wxss文件中.flex类样式中设置侧轴排列方式为 align-items: flex-start; 效果如下所示。

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

#### 4.3 flex-end ####

侧轴上的子元素对齐到终点

修改index.wxss文件中的.flex类样式中align-items的值为flex-end; 效果如下所示。

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

#### 4.4 center ####

侧轴上的子元素在容器中居中对齐

修改index.wxss文件中的.flex类样式中align-items的值为center; 效果如下所示。

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

#### 4.5 stretch ####

如果子元素未设置高度或设为auto，那么子容器将占满整个容器的高度

修改index.wxss文件中的.flex类样式中align-items的值为stretch; 我们将子元素的高度给注释掉，效果如下所示。

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

#### 4.6 baseline ####

基线对齐，基线是文本字符的底部线，这意味着如果你的Flexbox项目包含文本，那么这些文本将尽可能地与它们的容器的基线对齐。

修改index.wxss文件中的.flex类样式中align-items的值为baseline ; 效果如下所示。

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

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

### 5、设置主轴方向 ###

#### 5.1 flex-direction属性和属性值以及作用 ####

默认情况下，主轴方向为从左到右，可以通过 **flex-direction** 属性来设置他们的排列方式。flex-direction常用的属性值有以下几种：

<table> 
 <thead> 
  <tr> 
   <th align="center">属性</th> 
   <th align="center">属性值</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">flex-direction</td> 
   <td align="center">row</td> 
   <td align="center">默认值，主轴为水平方向，从左到右排列</td> 
  </tr> 
  <tr> 
   <td align="center">flex-direction</td> 
   <td align="center">row-reverse</td> 
   <td align="center">主轴为水平方向，从右到左</td> 
  </tr> 
  <tr> 
   <td align="center">flex-direction</td> 
   <td align="center">column</td> 
   <td align="center">主轴为垂直方向，从上到下</td> 
  </tr> 
  <tr> 
   <td align="center">flex-direction</td> 
   <td align="center">column-reverse</td> 
   <td align="center">主轴为垂直方向，从下到上</td> 
  </tr> 
 </tbody> 
</table>

flex-direction属性决定了弹性容器中子元素的排列方向。以上表格列出了四种可能的值以及它们的作用。这些值可以用于创建不同的布局效果，例如水平或垂直的线性布局或反向布局。通过灵活地使用这个属性，开发人员可以轻松地控制页面元素的布局。

#### 5.2 row ####

主轴方向为从左到右，默认排列

在index.wxss文件中.flex类样式中设置主轴方向为 flex-direction: row; 效果如下所示。

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

#### 5.3 row-reverse ####

主轴方向为从右到左

修改index.wxss文件中的.flex类样式中flex-direction的值为row-reverse; 效果如下所示。

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

#### 5.4 column ####

主轴方向为从上到下

修改index.wxss文件中的.flex类样式中flex-direction的值为column; 效果如下所示。

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

#### 5.5 column-reverse ####

主轴方向为从下到上

修改index.wxss文件中的.flex类样式中flex-direction的值为column-reverse; 效果如下所示。

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

### 6、换行 ###

#### 6.1 flex-wrap属性和属性值以及作用 ####

默认情况下，子容器是不换行的。flex-wrap常用的属性值有以下几种：

<table> 
 <thead> 
  <tr> 
   <th align="center">属性名</th> 
   <th align="center">属性值</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">flex-wrap</td> 
   <td align="center">nowrap</td> 
   <td align="center">默认值。项目不会换行，即使超出容器宽度也会显示在一行上。</td> 
  </tr> 
  <tr> 
   <td align="center">flex-wrap</td> 
   <td align="center">wrap</td> 
   <td align="center">项目在超出容器宽度时进行换行。当空间足够时，项目将尽可能并排显示。</td> 
  </tr> 
  <tr> 
   <td align="center">flex-wrap</td> 
   <td align="center">wrap-reverse</td> 
   <td align="center">与wrap值类似，但是换行方向相反。即第一行在容器的底部，后续行依次向上排列。</td> 
  </tr> 
 </tbody> 
</table>

#### 6.2 nowrap ####

默认值。子容器不会换行，即使超出容器宽度也会显示在一行上。

在index.wxss文件中.flex类样式中设置主轴排列方式为flex-wrap: nowrap; 效果如下所示。

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

#### 6.3 wrap ####

项目在超出容器宽度时进行换行。当空间足够时，项目将尽可能并排显示。

修改index.wxss文件中的.flex类样式中flex-wrap的值为wrap; 并且将高度注释，再添加两个子容器，让效果看的更直观，效果如下所示。

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

#### 6.3 wrap-reverse ####

与wrap值类似，但是换行方向相反。即第一行在容器的底部，后续行依次向上排列。

修改index.wxss文件中的.flex类样式中flex-wrap的值为wrap-reverse; 效果如下所示。

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

### 7、多行排列方式 ###

align-content 是一个CSS属性，用于在flex容器中对齐交叉轴上的flex项目，当有多余空间时。它决定了当存在多余空间或者flex容器被包裹到多行时，flex项目的分布或位置。

#### 7.1 align-content属性和属性值以及作用 ####

默认情况下，项目被拉伸以填满整个容器的交叉轴。align-content常用的属性值有以下几种：

<table> 
 <thead> 
  <tr> 
   <th align="center">属性名</th> 
   <th align="center">属性值</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">align-content</td> 
   <td align="center">flex-start</td> 
   <td align="center">将项目对齐到容器的起始位置</td> 
  </tr> 
  <tr> 
   <td align="center">align-content</td> 
   <td align="center">flex-end</td> 
   <td align="center">将项目对齐到容器的末尾位置</td> 
  </tr> 
  <tr> 
   <td align="center">align-content</td> 
   <td align="center">center</td> 
   <td align="center">将项目对齐到容器的中心位置</td> 
  </tr> 
  <tr> 
   <td align="center">align-content</td> 
   <td align="center">space-between</td> 
   <td align="center">在容器中均匀分布项目，首尾项目分别对齐容器的起始和末尾位置</td> 
  </tr> 
  <tr> 
   <td align="center">align-content</td> 
   <td align="center">space-around</td> 
   <td align="center">在容器中均匀分布项目，项目周围留有等距空间</td> 
  </tr> 
  <tr> 
   <td align="center">align-content</td> 
   <td align="center">stretch</td> 
   <td align="center">默认排列，项目被拉伸以填满整个容器的交叉轴</td> 
  </tr> 
  <tr> 
   <td align="center">align-content</td> 
   <td align="center">initial</td> 
   <td align="center">将属性重置为默认值</td> 
  </tr> 
  <tr> 
   <td align="center">align-content</td> 
   <td align="center">inherit</td> 
   <td align="center">继承父元素的属性值</td> 
  </tr> 
 </tbody> 
</table>

#### 7.2 flex-start ####

将项目对齐到容器的起始位置

在index.wxss文件中.flex类样式中设置主轴排列方式为align-content: flex-start; 效果如下所示。

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

#### 7.3 flex-end ####

将项目对齐到容器的末尾位置

修改index.wxss文件中的.flex类样式中align-content的值为flex-end; 效果如下所示。

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

#### 7.4 center ####

将项目对齐到容器的中心位置

修改index.wxss文件中的.flex类样式中align-content的值为center; 效果如下所示。

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

#### 7.5 space-between ####

在容器中均匀分布项目，首尾项目分别对齐容器的起始和末尾位置

修改index.wxss文件中的.flex类样式中align-content的值为space-between; 效果如下所示。

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

#### 7.6 space-around ####

在容器中均匀分布项目，项目周围留有等距空间

修改index.wxss文件中的.flex类样式中align-content的值为space-around ; 效果如下所示。

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

#### 7.6 stretch ####

默认排列，项目被拉伸以填满整个容器的交叉轴

修改index.wxss文件中的.flex类样式中align-content的值为stretch; 效果如下所示。

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

### 8. 使用Flex布局列表不美观解决 ###

这里我们使用了

display: flex;
    justify-content: space-around;

布局，当我们的内容，月份、示例1、示例2、示例3都是一致的时候看起来没什么  
![在这里插入图片描述][ad76bfe0eb8042eb9921047ba3acb605.png]  
如图所示，可以看到我们只单独使用flex布局，布局列表的时候就会造成这种看起来很不好的效果，歪歪扭扭，这个因为每列的内容不一致，导致使用`justify-content: space-around;`布局的时候造成的效果很不美观  
![在这里插入图片描述][11320c01dc4e470eac1b3106cff86189.png]  
因为这个是进行左右排列的，这个时候我们只需要给每个标签添加一个固定宽度，每个文本进行居中显示就可以让布局更加美观

.flex{
        
      width: 15%; 
      text-align: center;
    }

就这样的简单一步，就可以让我们的布局更加美观，如下图所示  
最终效果，简直完美 ，**上下排列也是一样的，只需要添加固定高度就可以了**  
![在这里插入图片描述][e195c25ad4764f0495ab1f5902f4f18d.png]

[15a7e7c3fb394bb5a3135d67bf1c79d0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/be1abbbd8bfd4c6cbfe516c3eca670b3.png
[e4e1f4db8aab401fa59f8cbd8c123c61.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/7161b9fdfea5419cbac3533dbca505f5.png
[7f035624e0224511a5cbc2fb5b1da710.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/3d846a3ad3b640e8b64d2db320ecebff.png
[00fd88ea7c76450c8b9348e84e4f774f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/9a71de45a28140e28e6eeea4d4d01ffb.png
[66781ff96dfd4f83b485de751ecf8173.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/d1ceb49cda36497a823e35cc657fbc87.png
[a57b9e32575d401e81c33fd4cdf637f8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/d6bc4c02c3d34468b437d20c7846bbe5.png
[5e2b8976bef047cca021169b96d0589a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/0a697d5b77b0435583eec7376968d375.png
[324a2f2512ff49738eeeca488072e027.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/60aa56b4decd4879aab6952753df7715.png
[7091fe5486bb4e98a16c91fed76fd06a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/3b08c17584c8475e85770de6a03b970e.png
[759eb475320243f3b00535a65c545279.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/6529764ae3fe417ca54ccb3b873c162b.png
[7415ba1d7d924b0490dd529b0eadc747.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/ea6a7bca31af4f9ba01a43d65678a85a.png
[64607b832cbf4c65a654b8b9d8a05aec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/c25df154fe424fa6b1a6423cb2e812ca.png
[15e66430c8a04430a41e0df6be496a8a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/66ef95cc398045e7a0964a51c700120c.png
[4e3d5eb95d7e4a29a1350910aca1c5a1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/0963ee7f3b864b548783ba0aa5b29b42.png
[4639ecf7fa9a4fc79bfa9cffb03a4f38.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/9a24a5949b5c49c6a47b9237b0b616b1.png
[5a49a90bad6d4192a42ff3d44f37cdce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/78bc9fed90af41dfb887f99528f174f8.png
[7bc4e6c37bec4743b9b2a32060198749.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/63e0b92c06524187985451c26fa06396.png
[a8d80756354844d99c01a7586bd5a5cc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/785f7f4dc7514c57b8471624b3b1eaf0.png
[f956066be13241808c05733cf5b4b88d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/8425fb17f9d943aa9119142427b705aa.png
[84dad7fa828f4feb82bcd8fc58bf06c2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/c626233481d9457c9998f5ac29deabc3.png
[2e3755a2919745b8b92695a93c8e75b9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/54672240f9294e7fb314f1ba47b105c5.png
[199829055da44124b6ba431e1d890aa4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/9d6539bc4b1c432ead26b0395d7dc1db.png
[36bf216ea5bb4116a0e1b20a247de4df.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/4e2e2ca8ed3c45118d5e3aa66faf51b3.png
[de64486f5a1548adba17ad5e35687a9b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/3d30e98659e344968bc10d2260bd3707.png
[64df959c68254765bde32f2cce526c56.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/fa521bdbedb749fca8500a1bc3375f11.png
[bcdb220506d442e581bc547755039173.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/d0ddc5fd323e4557895fa252897c4f7c.png
[c39956b942b64808bf1df034635bcc9b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/28de16f368844c32a384f4334fb26658.png
[9e46a8f77cf246378118ff966a95d8b0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/ada1eb1f630f4d309735852f1564f115.png
[ad76bfe0eb8042eb9921047ba3acb605.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/19fe4281f220422db97e15a649dfbb41.png
[11320c01dc4e470eac1b3106cff86189.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/fa918bb6765944b2af9c443d636937cf.png
[e195c25ad4764f0495ab1f5902f4f18d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/7a886f304971423584b8748e0f905752.png