通过青蛙闯关小游戏，学习flex布局

第一关：

#pond {
  display: flex;
  justify-content: flex-end;
}
第二关：

#pond
 {
  display: flex;
  justify-content: center;
}
第三关：

#pond 
{
  display: flex;
  justify-content: space-around;
}
第四关

#pond 
{
  display: flex;
  justify-content: space-between;
}
第五关：

#pond {
  display: flex;
  align-items: flex-end;
}
第六关：

#pond {
  display: flex;
  justify-content: center;
  align-items: center;
}
第七关：

#pond {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}
第八关：

#pond {
  display: flex;
  flex-direction: row-reverse;
}
第九关：

#pond {
  display: flex;
  flex-direction: column;
}
第十关：

#pond {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
第十一关：

#pond {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
第十二关：

#pond {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
}
第十三关：

#pond {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: flex-end;
}
第十四关：

#pond {
  display: flex;
}

.yellow {
  order: 2;
}
第十五关：

#pond {
  display: flex;
}

.red {
  order: -1;
}
第十六关：

#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {
  align-self: flex-end;
}
第十七关：

#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {
  order: 2;
  align-self: flex-end;
}
第十八关：

#pond {
  display: flex;
  flex-wrap: wrap;
}
第十九关：

#pond {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
第二十关：

#pond {
  display: flex;
  flex-flow: column wrap;
}
第二十一关：

#pond {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
 第二十二关：

#pond {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}
 第二十三关：

#pond {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  align-content: center;
}
 第二十四关：

#pond {
  display: flex;
  flex-flow:column-reverse wrap-reverse;
  justify-content:center;
  align-content:space-between;
}
(在写最后一关想了很久，翻了mdn才明白，注意区分align-content和align-items)