每日推荐
1
前言
本代码中涉及到四种Flex的布局方式,分别使用了不同的flex的不同属性。建议看本文最后的学习参考进行相关属性的学习。
下面说说我在使用Flex布局的案例与使用的时候遇到的那些事,希望对大家有些帮助吧!
2
骰子布局
骰子布局中主要强调几个属性的使用等。
CSS代码如下:
效果图:
3
网格布局
最简单的网格布局,就是平均分布。在容器里面平均分配空间,跟上面的骰子布局很像,但是需要设置项目的自动缩放。
HTML代码如下:
CSS代码如下:
效果图:
4
百分比布局
某个网格的宽度为固定的百分比,其余网格平均分配剩余的空间。
HTML代码如下:
CSS代码如下:
效果图:
5
流式布局
九宫格、瀑布流等效果的制作。
HTML代码如下:
CSS代码如下:
效果图:
6
个人案例
·THE END·
【极客小寨】:关注、交流、分享
关于Geekxz的那些事儿
更多分享,请持续关注“极客小寨”
很多未公开的、隐藏的功能,用心去发现,惊喜总是会有的!
极客小寨:专注技术干货分享
围观
逻辑层分析 应用程序逻辑app.js
丨更多
热文
Python自学书籍推荐
丨更多
热文
PHP程序员进阶学习书籍参考指南
丨更多
热文
AI人才需求翻倍,技术岗涨幅最多
丨更多
领取专属 10元无门槛券
私享最新 技术干货