FlexboxFroggy game

`justify-content` 水平控制

flex-start: Items align to the left side of the container. 在Row 起始位置
flex-end: Items align to the right side of the container. 在 Row 结束位置
center: Items align at the center of the container. 在Row和Column的居中位置
space-between: Items display with equal spacing between them. 在Row和Column之间均匀分布，两端对齐，元素之间等距。首尾没有间距，只有“中间”有空隙
- |A B C| 没有左右边距，中间间距相等 ^ ^
space-around: Items display with equal spacing around them.在Row和Column之间均匀分布，所有元素周围都有相同间距。元素两边都有空隙，左右两侧也留空
- | A B C | 左右都有空隙，但两边的空隙是中间空隙的一半 ^ ^

Level 1

1.0

1.1

在 Row 结束位置，填入justify-content: flex-end即可

Level 2

2.0

2.1

在Row的居中位置，填入justify-content: center即可

Level 3

3.0

3.1

在Row均匀分布，所有元素周围都有相同间距。元素两边都有空隙，左右两侧也留空，填入justify-content: space-around即可

Level 4

4.0

4.1

在Row均匀分布，两端对齐，元素之间等距。首尾没有间距，只有“中间”有空隙，填入justify-content: space-between即可

`align-items` 竖直控制

flex-start: Items align to the top of the container. 靠顶部对齐 ↑A B C
flex-end: Items align to the bottom of the container. 靠底部对齐 A B C↓
center: Items align at the vertical center of the container. 在垂直方向居中对齐 ↕ A B C ↕
baseline: Items display at the baseline of the container. 元素以文字的基线对齐(文字底线一致),适合多种字体或文字元素对齐
stretch: Items are stretched to fit the container. 元素会被拉伸到父容器高度（如果元素自己没设置高度）A B C 高度都被撑满

Level 5

5.0

5.1

靠底部对齐, 填入align-items: flex-end即可

`justify-content` and `align-items` 混合

Level 6

6.0

6.1

Row 和 column 的中心，填入justify-content: center; align-items: center;即可

Level 7

7.0

7.1

先用justify-content: space-around把青蛙在row 均匀分布保留两边空白
再用align-items: flex-end;把青蛙放在column底部

`flex-direction` items 排列方向控制

row: Items are placed the same as the text direction. 水平方向，从左到右
row-reverse: Items are placed opposite to the text direction. 水平方向，从右到左
column: Items are placed top to bottom. 纵向从上到下排
column-reverse: Items are placed bottom to top. 纵向从下往上排

Level 8

8.0

8.1

水平方向，反转排序，空格也算。填入flex-direction: row-reverse;即可

Level 9

9.0

9.1

纵向从上到下排, 填入flex-direction: column;即可

`flex-direction` and `justify-content`混合

Level 10

10.0

10.1

✅ 用 flex-end

flex-direction: row-reverse; 主轴变成从右往左。
justify-content: flex-end; 把青蛙往主轴的尾部推，也就是左边（因为现在主轴反转了）。

❌ 用flex-start

justify-content: flex-start; 把青蛙往主轴的起点推，也就是右边。

Level 11

11.0

11.1

✅ when the flex direction is a column, justify-content changes to the vertical and align-items to the horizontal.

flex-direction: column; 将青蛙改为纵向排列
justify-content: flex-end; 此时原本纵向轴改为横向轴，因此用justify-content

Level 12

12.0

12.1

flex-direction: column-reverse;换成纵向反转排列
justify-content: space-between; 此时原本纵向变成横向，在row均匀对齐，首尾无空隙

`flex-direction`, `justify-content`, and `align-items`混合

Level 13

13.0

13.1

flex-direction: row-reverse;按照row反转顺序
justify-content: center; 将反转顺序后的青蛙放中间
align-items: flex-end;按照列移到最底下

`order`

有时候 flex-direction 和justify-content 没法完全解决“顺序错乱”的问题。

By default, items have a value of 0, but we can use this property to also set it to a positive or negative integer value (-2, -1, 0, 1, 2).

Level 14

14.0

14.1

没有设置order的青蛙默认order为0
order 按从小到大排
只需要让黄色order变最大

Level 15

15.0

15.1

让红色order值最小即可

`align-self` (与align-items语法一样)

Level 16

16.0

16.1

只把黄色青蛙移动到底部，填入align-self: flex-end;即可。

`order` and `align-self`混合

Level 17

17.0

17.1

order: 1; 把黄色移到最右边
align-self: flex-end; 把黄色移到最下面

`flex-wrap` 控制子元素是否换行

nowrap: Every item is fit to a single line.
- (默认) 所有子元素挤在一行内，即使会溢出容器
wrap: Items wrap around to additional lines.
- 正常换行，从上到下、从左到右换行排列（就像段落折行一样）
wrap-reverse: Items wrap around to additional lines in reverse.
- 反方向换行，从下到上进行换行排列

Level 18

18.0

18.1

填入flex-wrap: wrap;，当子元素总宽度 > 容器宽度时，就会换行。

`flex-direction` and `flex-wrap` 混合

Level 19

19.0

19.1

flex-direction: column; 先换成纵向排列，现在纵轴变成横轴
flex-wrap: wrap; 同横轴一样使用换行

`flex-flow` (`flex-direction` and `flex-wrap`结合)

flex-flow: <flex-direction> <flex-wrap>;

Level 20

20.0

20.1

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

`align-content`

当容器内的项目因为 flex-wrap: wrap 而出多行时，align-content 控制这些“行之间的间距”。

flex-start: Lines are packed at the top of the container. 所有行靠上对齐
flex-end: Lines are packed at the bottom of the container. 所有行靠底部对齐
center: Lines are packed at the vertical center of the container. 多行整体居中对齐
space-between: Lines display with equal spacing between them. 行与行之间平均分布（首尾紧贴）
space-around: Lines display with equal spacing around them. 行与行之间平均分布（首尾也有间距）
stretch: Lines are stretched to fit the container. (默认)多行拉伸铺满整个容器

Level 21

21.0

21.1

wrap 后所有行向上靠齐，填入align-content: flex-start;即可

Level 22

22.0

22.1

wrap 后所有行向下靠齐，填入align-content: flex-end;即可

`flex-direction` and `align-content` 混合

Level 23

23.0

23.1

flex-direction: column-reverse; 将青蛙纵置反转排列
align-content: center; 内容格式中心对齐

Level 24

24.0

24.1

flex-flow: column-reverse wrap-reverse;
- column-reverse: 按列反转排序，把红色放下面，纵轴变成横轴，起始坐标相反
- wrap-reverse; 反方向换行，从下到上
align-content: space-between; 将青蛙两边对齐，首尾不留空
justify-content: center;将黄色青蛙中心放置，绿色红色位置不受影响