FLEXBOX FROGGY11-24level(flex布局小游戏)

最新推荐文章于 2024-05-03 20:41:06 发布

Loey_61

最新推荐文章于 2024-05-03 20:41:06 发布

阅读量4.3k

点赞数

分类专栏： flex布局文章标签： css css3 html 前端

本文链接：https://blog.csdn.net/weixin_43406277/article/details/121629857

版权

本文介绍了Flexbox Froggy布局小游戏的第11至24级，涵盖flex-direction、justify-content、order、align-self、flex-wrap、flex-flow和align-content等属性的使用，通过实例帮助理解Flexbox布局。

摘要由CSDN通过智能技术生成

FLEXBOX FROGGY11-24level(flex布局小游戏)

在这里插入图片描述

使用 flex-direction 和 justify-content帮助青蛙找到他们的荷叶

当伸缩方向为纵向时，justify-content将改变垂直方向，align-items将改变水平方向。
在这里插入图片描述

flex-direction:column;//将方向更改为垂直方向
justify-content:end;//将小青蛙移到底部


#pond {
   
display: flex;
flex-direction:column;
justify-content:end;
}

level-12

使用 flex-direction 和 justify-content帮助青蛙找到他们的荷叶
在这里插入图片描述

 flex-direction:column-reverse;;//将小青蛙更改为垂直方向翻转
 justify-content:space-between;//为每个小青蛙设置相同间隔

#pond {
   
display: flex;
flex-direction:column-reverse;
justify-content:space-between;
}

在这里插入图片描述

flex-direction:row-reverse;;//将小青蛙更改为水平方向翻转
justify-content:space-between;//将小青蛙水平居中
align-items:end;//将小青蛙放置在页面最底部

#pond {
   
display: flex;
flex-direction:row-reverse;
justify-content:center;

关注

专栏目录