Flexible(flex)布局入门到彻底理解

墨蓝 2023-03-03 11:20 9阅读 0赞

## 一.简介 ##

### 一、概述 ###

浮动在移动布局中不再重要，flex盒模型越来越重要。

flexbox经历过三个版本，主要区别是2009年到2012年之间的语法变化。
    
    最新的语法和现在规范是同步的（例display:flex和“flex-{*}”属性）。
    在这之间的语法是2011年出现的非官方语法，只能被IE识别（例display:flexbox;display: -ms-flexbox）。
    最老的语法产生于2009年（例display: box;或者“box-{*}”属性）
    - W3C 2009年第1次草案：[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)
    - W3C 2011年第2次草案：[display:flexbox | inline-flexbox;](https://www.w3.org/TR/2011/WD-css3-flexbox-20110322/)
    - W3C 2012年第5次草案及以后的候选推荐标准：[display:flex | inline-flex;](https://www.w3.org/TR/2012/WD-css3-flexbox-20120612/)

### 二、布局模型 ###

Flexible Box弹性布局

任意容器都可以指定成flex布局：

.box { 
      display: flex;
    }
     .box { 
      display: inline-flex;
    }

> 设为flex布局后，子元素的float、clear、vertical-align将失效

称采用Flex布局的元素为Flex容器（flex container），它的所有子元素自动成为容器成员，称为Flex项目(flex item)。

![flex container][]

*  两根轴：
 *  水平主轴 main axis
    
     *  主轴与边框的左右交叉点 main start/main end
 *  垂直交叉轴 cross axis
    
     *  交叉轴与边框的上下交叉点 cross start/cross end
 *  项目（flex item）默认沿主轴排列，单项目占据的主轴空间/交叉轴空间 main size/cross size

### 三、flex容器属性 ###

1.  flex-direction 决定主轴方向=项目排列方向
2.  flex-wrap 定义如何换行
3.  flex-flow 它是flex-direction和flex-wrap的简写形式，语法糖
4.  justify-content 定义项目在主轴上的对齐方式
5.  align-items 定义项目在交叉轴上的对齐方式
6.  align-content 定义多根轴线的对齐方式。若项目只有一根轴线则不生效。

1.flex-direction值：

*  row(默认值) 主轴为水平方向，起点在左端
 *  row-reverse 主轴为水平方向，起点在右端
 *  column 主轴为垂直方向，起点在左端
 *  column-reverse 主轴为垂直方向，起点在右端

![flex-direction][]

2.flex-wrap值：

*  nowrap(默认) 不换行

![nowrap][]

*  wrap 换行，第一行在上方

![wrap][]

*  wrap-reverse 换行，第一行在下方

![wrap-reverse][]

> 默认情况，所有flex项目会排在一条线上，不会自动换行

3.flex-flow默认值：row nowrap

.box { 
      flex-flow: <flex-direction> <flex-wrap>;
    }

### 四、flex常用属性 ###

#### 1、用于父元素的样式 ####

\-webkit-box模型【旧】

flex模型 【新】

#### 2、用于子元素的样式 ####

【旧】box-flex:0|任意数字；该属性让子容器针对父容器的宽度按一定规则进行划分。

【新】flex: none | \[ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> \],默认值 0 1 auto。

![img][]![img][img 1]

![img][img 2]

### 五、flex项目属性 ###

*  order 定义项目排列顺序。数值越小，排列越靠前，默认为0

.item { 
      order: <integer>;
    }

![order][]

--------------------

*  flex-grow 定义项目放大比例，默认为0

> 如果所有项目flex-grow属性为1，它们将等分剩余空间。以此类推

![flex-grow][]

--------------------

*  flex-shrink 定义项目缩小比例，默认为1

> 如果所有项目flex-shrink属性为1，当空间不足时等比例缩小。  
> 如果有一个项目flex-shrink为0，其他项目都为1，空间不足时前者不缩小

![flex-shink][]

--------------------

*  flex-basis 定义在分配多余空间前，项目占据的主轴空间(main size)

浏览器据此计算主轴是否有多余空间，默认值为auto即项目本来的大小

.item { 
      flex-basis: <length> | auto;
    }

--------------------

*  flex 是flex-grow,flex-shink,flex-basis的简写，语法糖，默认值0,1,auto，后两者可选

.item { 
      flex: none | [<flex-grow> <flex-shrink> ? || <flex-basis>]
    }

有两个快捷值：

auto： 1 1 auto

none： 0 0 auto

> 建议优先使用此属性代替单独写3个分离的属性，因为浏览器会推算相关值。

--------------------

*  align-self 允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性

默认值auto，表示继承父元素的align-items，如果没有父元素则等同于strech

.item { 
      align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }

![align-self][]

## 二、知识点 ##

### 1.认识flex布局 ###

两个重要的概念

*  开启了flex布局的元素叫 `flex container`
 *  `flex container` 里面的直接子元素叫做 `flex items`

设置`display`属性为`flex`或者`inline-flex`可以试之成为`flex container`

*  flex: flex container以 block-level 形式存在
 *  inline-flex: flex container 以inline-level 形式存在

### 2.Flex-direction ###

![flex-direction][]

flex items 默认都是沿着 main axis （主轴） 从 main start 开始往 main end 方向排布

### 3.Justify-content ###

justify-content 决定了 flex items 在 main axis 上的对齐方式

*  flex-start （默认值）: 与 main start 对齐
 *  flex-end: 与 main end 对齐
 *  center： 居中对齐
 *  space-between :
    
     *  flex items 之间的距离相等
     *  与 main start、main end 两端对齐
 *  space-evenly :
    
     *  flex items 之间的距离相等
     *  flex items 与 main start、main end 之间的距离等于 flex items 之间的距离
 *  space-around :
    
     *  flex items 之间的距离相等
     *  flex items 与 main start、main end 之间的距离是 flex items 直接距离的一半

![img][]

**flex-start:**

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

**flex-end:**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 1]

**center**:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 2]

**space-between:**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 3]

**space-around:**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 4]

**space-evenly:**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 5]

### 4.align-items ###

align-items 决定了 flex items 在 cross axis 上的对齐方式

*  normal：在弹性布局中，效果和stretch一样 （默认值）
 *  stretch：当 flex items 在 cross axis 方向的 size 为 auto 时， 会自动拉伸填充 flex container
 *  flex-start：与 cross start 对齐
 *  flex-end：与 cross end 对齐
 *  center： 居中对齐
 *  baseline：与基准线对齐

![img][img 1]

**normal && stretch：**

前提是：flex items 未指定 height

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 6]

**flex-start：**

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

**flex-end：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 8]

**center：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 9]

**baseline：**(基准线以第一个为准)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 10]

item1{
    	font-size: 50px;
    }

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

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

### 5.flex-wrap ###

*  nowrap(默认) 不换行

![nowrap][]

*  wrap 换行，第一行在上方

![wrap][]

*  wrap-reverse 换行，第一行在下方

![wrap-reverse][]

> 默认情况，所有flex项目会排在一条线上，不会自动换行

**nowrap(默认)** 不换行

3个item -》 9个item （放不下时会压缩）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 13]

**wrap：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 14]

**wrap-reverse：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 15]

### 6.flex-flow ###

**flex-flow 是 flex-direction || flex-wrap 的缩写**

*  可以省略，顺序随意

**flex-flow: row-reverse**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 16]

**flex-flow: row-reverse wrap**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 17]

**flex-flow: row-reverse wrap**

**justify-content: space-evenly**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 18]

### 7.align-content ###

align-content 决定了多行 flex items 在 cross axis 上的对齐方式，用法与justify-content类似

*  stretch（默认值）：与 align-items 的 stretch 类似
 *  flex-start：与 cross start 对齐
 *  flex-end: 与cross end 对齐
 *  center：居中对齐
 *  space-between:
    
     *  flex items 之间的距离相等
     *  与cross start、cross end 两端对齐
 *  space-around：
    
     *  flex items 之间的距离相等
     *  flex items 与 cross start、cross end之间的距离是flex items 之间距离的一半
 *  space-evenly：
    
     *  flex items 之间的距离相等
     *  flex items 与 cross start、cross end 之间的距离 等于 flex items 之间的距离

![img][img 2]

### 8.小结 ###

flex-container:

*  display: flex/inline-flex
    
     *  开启flex 布局
 *  flex-direction:
    
     *  决定主轴的方向
 *  justify-content:
    
     *  决定主轴上flex-items如何排布
 *  align-items:
    
     *  决定flex-items在交叉轴上的对齐方式
     *  normal
     *  stretch
     *  flex-start
     *  flex-end
     *  center
     *  baseline
 *  flex-wrap
    
     *  nowrap
     *  wrap
 *  flex-flow
    
     *  flex-direction
     *  flex-wrap

### 9.flex-items属性 order ###

order 决定了flex items 的排布顺序

*  可以设定任意整数（正整数、负整数、0），值越小就越排在前面
 *  默认值是0

.item1 {
    	background-color: #f00;
    	order: 10;
    }
    .item2 {
    	background-color: #0f0;
    	order: 6;
    }
    .item3 {
    	background-color: #00f;
    	order: 100;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 19]

### 10.flex-items属性 align-self ###

flex items 可以通过align-self 覆盖 flex container 设置的 align-items

*  auto （默认值）: 遵从 flex container 的 align-items 设置
 *  stretch、flex-start、flex-end、center、baseline，效果跟align-items一致

.box {
    	...
    	display: flex;
    	
    	align-items: center
    }
    .item1 {
    	background-color: #f00;
    }
    .item2 {
    	background-color: #0f0;
    }
    .item3 {
    	background-color: #00f;
    	align-self: flex-end;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 20]

### 11.flex-items属性 flex-grow ###

flex-grow 决定了 flex items 如何扩展

*  可以设置任意非负数子（正小数、正整数、0），默认值是0
 *  当flex container 在 main axis 方向上有剩余size时，flex-grow 属性才会有效

如果所有flex items的flex-grow 总和 sum 超过1，每个flex item 扩展的 size 为

*  flex container 的剩余size \* flex-grow / sum

如果所有 flex items 的flex-grow 总和不超过1，每个 flex item 扩展的 size 为

*  flex container 的剩余 size \* flex-grow

flex items 扩展后的最终size不能超过max-width\\max-height

.item1 {
    	background-color: #f00;
    	flex-grow: 1;
    }
    .item2 {
    	background-color: #0f0;
    	flex-grow: 1;
    }
    .item3 {
    	background-color: #00f;
    	align-self: flex-end;
    	flex-grow: 1;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 21]

.item1 {
    	background-color: #f00;
    	flex-grow: 2;
    }
    .item2 {
    	background-color: #0f0;
    	flex-grow: 2;
    }
    .item3 {
    	background-color: #00f;
    	align-self: flex-end;
    	flex-grow: 1;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 22]

### 12.flex-items属性 flex-shrink ###

flex-shrink 决定了 flex items 如何收缩

*  可以设置任意非负数字（正小数、正整数、0），默认值是1
 *  当 flex items 与 main axis 方向上超过了 flex container 的size，flex-shrink 属性才会有效

如果所有的flex items 的flex-shrink总和超过1，每个flex item 收缩的size为

*  flex items 超过flex container 的size \* 收缩比例 / 所有 flex items 收缩比例之和

如果所有flex items 的 flex-shrink总和sum不超过1,每个flex item 收缩的size为

*  flex items 超出 flex container 的 size \* sum \* 收缩比例 / 所有 flex items 的收缩比例之和
 *  收缩比例 = flex-shrink \* flex item 的 base size
 *  base size 就是 flex item 放入 flex container 之前的 size

flex items 收缩后的最终size 不能小于 min-width\\min-height

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 23]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 24]

### 13.flex-items属性 flex-basis ###

flex-basis 用来设置flex items 在 main axis 方向上的 base size

*  auto（默认值）、具体的宽度数值（100px）

决定 flex items 最终 base size 的因素， 从优先级高到低

*  max-width\\max-height\\min-width\\min-height
 *  flex-basis
 *  width\\height
 *  内容本身的size

### 14.flex-items属性 flex ###

flex 是 flex-grow || flex-shrink || flex-basis 的简写， flex 属性可以指定1个、2个或3个值

单值语法：值必须为以下其中之一：

*  一个无单位数（<number>）： 它会被当做<flex-grow>的值
 *  一个有效的宽度（width）值：它会被当做<flex-basis>的值
 *  关键字none、auto或initial

双值语法：第一个值必须为一个无单位数，并且它会被当做<flex-grow>的值

*  第二个值必须为以下之一：
    
     *  一个无单位数：它会被当做<flex-shrink>的值
     *  一个有效的宽度值：它会被当做<flex-basis>的值

三值语法：

*  第一个值必须为一个无单位数，并且它会被当做<flex-grow>的值
 *  第二个值必须为一个无单位数，并且它会被当做<flex-shrink>的值
 *  第三个值必须为一个有效的宽度值，并且它会被当做<flex-basis>的值

[flex container]: /images/20230208/b6128d3a049a43eea286debed4f9c1dd.png
[flex-direction]: /images/20230208/9a0318544ba04f45a6be9ede759d08a4.png
[nowrap]: /images/20230208/11a79de5eec948d2a45ea651e728fddd.png
[wrap]: /images/20230208/9f545f62323f46c1b77649e2031be9f6.png
[wrap-reverse]: /images/20230208/609e45e0ef7c4f24bbf26ea83a1690c8.png
[img]: /images/20230208/aa44d152f6304013a8476083a7cfc463.png
[img 1]: /images/20230208/8b5eef3772004e448850b6cee57e8392.png
[img 2]: /images/20230208/b34bc300fde143b6b97d27f999c7a2fe.png
[order]: /images/20230208/95c5d5548b6344439d569aa57134ae0c.png
[flex-grow]: /images/20230208/4db3db2da00b476688e59ef23303851e.png
[flex-shink]: /images/20230208/1e9bdcfa6ae445f28fa6966ea13ab7be.png
[align-self]: /images/20230208/506411c0c6ea43a1b74474b3d110eb79.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70]: /images/20230208/b08929f3f62e42f1ae4bc33d5b5340ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 1]: /images/20230208/cd1f9d072daa4da69df036d85de1a271.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 2]: /images/20230208/c4e9fe80210449888a474283be3e2bd0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 3]: /images/20230208/bffaa39bcb524e459b919def0120df67.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 4]: /images/20230208/0d368837a4154070bf49563c433b6cad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 5]: /images/20230208/7d2ed4ca4c3c41fb96002850e07292d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 6]: /images/20230208/261e9cb311204e4cbe87bc766e3fd95b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 7]: /images/20230208/dff7b0f9c77d4e2eb8dabf230755820c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 8]: /images/20230208/8ebd6ee03b754926b97f4d8847164341.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 9]: /images/20230208/dab601c912d8414885b6f1e4d3926862.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 10]: /images/20230208/2e61edf8fdc14955aaf02110da2b8ae8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 11]: /images/20230208/533c333671464fb386bd29857b470cf6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 12]: /images/20230208/badb9b301ce84c59b0f8bb551dd6a85a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 13]: /images/20230208/b88182f9dc03416a9b5d49f371b5462d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 14]: /images/20230208/b04e2297bf574a2caf32519fd7c21e9f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 15]: /images/20230208/bf4cf5fa1e0e4e8cbb25cf7febf610db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 16]: /images/20230208/4152db171fce405c916358381e26008a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 17]: /images/20230208/07f1617ddc294944b4759b1a5ceee6d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 18]: /images/20230208/d5ac7eedf82240ad9d7213033eea2dd0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 19]: /images/20230208/70547509ca7e4a999d2ca21304f844b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 20]: /images/20230208/8a24c90fd0854d11bb3d024b27ad54fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 21]: /images/20230208/ac66ebd21ca04c638f248f37e9370d90.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 22]: /images/20230208/4c4b8ae905bc4bc29b36cd4564030e6e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 23]: /images/20230208/0788aebec3d246eba53f98a57282518f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 24]: /images/20230208/8dcf5e1741e745b38f17e254a6ec28e3.png