微信小程序flex布局

AWang 发布于2019-08-30 13:09 / 2792人阅读

摘要：随着微信小程序的火热度上升，越来越多的非前端开发者开始接触小程序的开发，根据群里面的反应来看，这其中很多人对布局比较陌生，这篇文章不会对的概念做过多说明。

随着微信小程序的火热度上升，越来越多的非前端开发者开始接触小程序的开发，根据QQ群里面的反应来看，这其中很多人对flex布局比较陌生，这篇文章不会对flex的概念做过多说明。

一般来说我都会推荐先看看阮一峰写的flex布局，不过有的人说看了也不是很明白，想直接上手用，刚好有点时间整理一下，顺带给自己复习一下。

该样式不止适用于微信小程序，同样适用与其它web页面，把后缀名改为.css即可，故样式文件里面会有一些其它浏览器的兼容写法，若不需要可以删除

文件内容大致如下，均带有注释：

使用方式如下：

去文章尾部给出的地址下载或者复制样式文件代码，即app.wxss；

加入自己的项目文件夹（不需要的样式可以去掉）；

直接引用clss即可，如下：

    // 要使用弹性盒子，则需给父级加上 .box 类，使父级变成弹性盒子模型，如从左至右排列布局
    
        子元素
        子元素
    
    
    // 从上至下排列
    
        子元素
        子元素
    
    
    // 居中对齐
    
        子元素
        子元素

因我的小程序demo也使用了该样式文件，所以我直接把样式文件放入demo的app.wxss里了，Demo地址，样式文件下载（点击前往），欢迎start/fork，若有不正确的地方欢迎指正。

云服务器 GPU云服务器微信小程序微信小程序支付微信小程序部署微信小程序搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115344.html

微信小程序之scroll-view的flex布局问题

摘要：关于微信小程序的组件，第一次写的时候是直接在中用了一层容器包裹子元素，然后用了布局，并且是用了组件来实现的横向滚动，后面有提出改进，但是不记录下，就发现过了几天，就有点懵了效果图在里加一层容器，使用布局实现这里用布局实现的话，就要用组关于微信小程序的scroll-view组件，第一次写的时候是直接在scroll-view中用了一层容器包裹子元素，然后用了flex布局，并且是用了组件来...

nihao 2019-08-23 14:43 评论0 收藏0
原创：新手布局福音！微信小程序使用flex的一些基础样式属性（一）

摘要：来源微信小程序使用的一些基础样式属性作者布局相对于以前我们经常所用到的布局方式要好的很多，在做微信小程序的时候要既能符合微信小程序的文档开发要求，又能使用不同以往的居中方式并减少的相关样式声明。来源：微信小程序使用flex的一些基础样式属性作者：Nazi Flex布局相对于以前我们经常所用到的布局方式要好的很多，在做微信小程序的时候要既能符合微信小程序的文档开发要求，又能使用不同以往...

andot 2019-08-21 14:52 评论0 收藏0
原创：新手布局福音！微信小程序使用flex的一些基础样式属性（一）

摘要：来源微信小程序使用的一些基础样式属性作者布局相对于以前我们经常所用到的布局方式要好的很多，在做微信小程序的时候要既能符合微信小程序的文档开发要求，又能使用不同以往的居中方式并减少的相关样式声明。来源：微信小程序使用flex的一些基础样式属性作者：Nazi Flex布局相对于以前我们经常所用到的布局方式要好的很多，在做微信小程序的时候要既能符合微信小程序的文档开发要求，又能使用不同以往...

zhangyucha0 2019-08-14 16:55 评论0 收藏0
微信小程序①

摘要：小程序抛弃了传统的直接操作的开发方法采用了的开发思路实现动态解析。借鉴之前炒的很火的框架思路实现了诸如单向数据绑定可移植在过程中真的是只需要关心逻辑的实现数据的排序避免反复的查找丶操作。写一个微信小程序系列的开发关键点小程序基本架构 showImg(http://upload-images.jianshu.io/upload_images/4384845-cea5b04cbae...

SunZhaopeng 2019-08-20 18:58 评论0 收藏0