微信小程序开发必备必看常用的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人才需求翻倍,技术岗涨幅最多

丨更多

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180114G0DNHA00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券