微信小程序开发必备必看常用的Flex布局模式-wxflex

每日推荐

1

前言

本代码中涉及到四种Flex的布局方式，分别使用了不同的flex的不同属性。建议看本文最后的学习参考进行相关属性的学习。

下面说说我在使用Flex布局的案例与使用的时候遇到的那些事，希望对大家有些帮助吧！

2

骰子布局

骰子布局中主要强调几个属性的使用等。

CSS代码如下：

效果图：

3

网格布局

最简单的网格布局，就是平均分布。在容器里面平均分配空间，跟上面的骰子布局很像，但是需要设置项目的自动缩放。

HTML代码如下：

CSS代码如下：

效果图：

4

百分比布局

某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。

HTML代码如下：

CSS代码如下：

效果图：

5

流式布局

九宫格、瀑布流等效果的制作。

HTML代码如下：

CSS代码如下：

效果图：

6

个人案例

·THE END·

【极客小寨】：关注、交流、分享

关于Geekxz的那些事儿

更多分享，请持续关注“极客小寨”

很多未公开的、隐藏的功能，用心去发现，惊喜总是会有的！

极客小寨：专注技术干货分享

围观

逻辑层分析 应用程序逻辑app.js

丨更多

热文

Python自学书籍推荐

丨更多

热文

PHP程序员进阶学习书籍参考指南

丨更多

热文

AI人才需求翻倍，技术岗涨幅最多

丨更多