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

$\"收藏此主题\"$

最爱飘移

0粉丝
0精华
318帖子

用户：最爱飘移
等级：Lv1
地区：

发表于 2020-02-19 21:19

| 只看楼主 | 申请车主认证 | 申请精华

您好，精华帖至少要有15张图片，文字不少200个字！并且是原创内容，布局合理。
查看精华帖标准>>

楼主电梯直达楼

Flexbox Froggy
第一关：

#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: 3;
}
第十五关：

#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: 1;
  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-direction: column-reverse;
  flex-wrap: wrap-reverse;
  justify-content: center;
  align-content: space-between;
}