flex-direction属性

1.主轴为水平方向，起点在右端。（从第一个开始往右对齐）

#pond {
  display: flex;
flex-direction: row-reverse;
}

2.主轴为垂直方向，起点在上沿。(垂直方向从上往下)

#pond {
  display: flex;
flex-direction: column;
}

3.将青蛙对应到颜色相匹配的荷叶上

先通过flex-direction：row-reverse（从第一个开始依次往右边移动）属性将不同颜色的青蛙按顺序纠正过来

然后用justify-content: flex-end;将青蛙移到尾端，因为红色青蛙所在位置是尾端，所以往左移动

4.将青蛙移到颜色相匹配的荷叶上

利用flex-direction: column;将青蛙变成垂直方向

利用justufy-content: flex-end;将青蛙移到最低端

5.将青蛙对应到颜色相匹配的荷叶上

利用flex-direction: column-reverse;（从第一个开始依次垂直按交叉轴往下移动）

利用justify-content: space-between;两端对齐项目之间间隔相等

6.将青蛙对应到颜色相匹配的荷叶上

#pond {
  display: flex;
flex-direction: row-reverse;
justify-content: center;
align-items: flex-end;
}

利用flex-direction: row-reverse;从第一个开始依次水平往右移动

利用justify-content: center;将青蛙移到中间

利用align-items: flex-end;