当前位置: 首页 > Web前端 > HTML5

拒绝烂大街——Flexbox布局示范站了解

时间:2023-04-05 16:41:36 HTML5

前言最近学习了Flexbox布局。当时觉得真是版面神器。终于摆脱了使用各种定位浮动布局的日子。我想写一篇文章总结一下。发现介绍Flexbox布局的文章都写得很烂,各种高手的写的也很形象。感觉写一个布局用法只是为了自己记录下来供本地检查,感觉没有意义,所以想到了。之前在一个视频里看到过这样一个网站,但是当时打不开那个网址,于是萌生了自己写一个的想法。既可以自己巩固,也可以供初学者使用。Flexbox演示站点大致是这样的:点击设置Flex容器和Flex项的各个属性值,以及项的宽度,右侧实时查看效果。初学者更容易理解各个属性的作用。友情提示:初学者要记住所有的属性和值并不容易。鼠标放在属性名上可以显示对应属性的功能。查看Flexbox演示站点只是编写一些响应式CSS的简单方法。在移动端效果可能不是很好。PC端推荐使用GitHub地址。最后放几篇学习Flexbox布局时看的博客:阮一峰——Flex布局教程:语法阮一峰——Flex布局教程:实例介绍flexbox是如何通过动画工作的网站有的话给个star对你帮助不大