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

jzzlee 发布于2019-08-29 11:28 / 1439人阅读

摘要：首发地址微信小程序的布局种必备常用的布局模式代码库地址官方建议的布局的布局相比传统的布局来说，简单快捷方便。

首发地址:http://weappdev.com/t/flex-wx...

wxflex

微信小程序的Flex布局demo－4种必备常用的Flex布局模式

代码库

github地址：https://github.com/icindy/wxflex

官方建议的Flex布局

Flex的布局相比传统的float布局来说，简单、快捷、方便。掌握flex布局可以在制作微信小程序时减少wxss的代码，同时也符合微信小程序开发的文档要求

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

骰子布局

骰子布局中主要强调几个属性的使用display justify-content align-items align-self等

.first-face {
  display: flex;
  justify-content: center;
  align-items: center;
}

.second-face {
  display: flex;
  justify-content: space-between;
}

.second-pip-2 {
  align-self: flex-end;
}

网格布局

主要依赖flex属性

.Grid {
  display: flex;
}
.Grid-cell {
  flex: 1;
}

百分比布局

.Grid {
  display: flex;
}

.cell-u-full {
  flex: 0 0 100%;
}

流式布局

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

.parent {
  width: 100%;
  background-color: black;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.child {
  box-sizing: border-box;
  background-color: white;
  flex: 0 0 25%;
  height: 50px;
  border: 1px solid red;
}

Flex 学习参考

本代码参考阮一峰的网络日志:Flex 布局教程：实例篇编写

语法学习阮一峰的网络日志:Flex 布局教程：语法篇

专线服务私有云微信小程序开发微信小程序开发语言微信小程序开发免费微信小程序开发步骤

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

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

微信小程序资源汇总

awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合。我们会定期同步上的项目到这里，也欢迎各位 UI组件开发框架实用库开发工具服务端项目实例Demo UI组件 weui-wxss ★1873 - 同微信原生视觉体验一致的基础样式库zanui-weapp ★794 - 好用易扩展的小程序 UI 库wx-charts ★449 - 微信小程...

Olivia 2019-08-21 17:48 评论0 收藏0
剖析简易计算器带你入门微信小程序开发

摘要：源码分析这个简易计算器界面布局依然延续祖制，采用布局，貌似微信官方也是这么推荐的官方文档中就是使用。本计算器存在不完善和，因为重点不是实现全部功能，而是搞清楚微信小程序开发方法，所以非关注点不用在意。写在前面，但是重点在后面这是教程，也不是教程。可以先看Demo的操作动图，看看是个什么玩意儿，GitHub地址（https://github.com/dunizb/wxapp-sCa...

AaronYuan 2019-08-29 11:22 评论0 收藏0
剖析简易计算器带你入门微信小程序开发

摘要：源码分析这个简易计算器界面布局依然延续祖制，采用布局，貌似微信官方也是这么推荐的官方文档中就是使用。本计算器存在不完善和，因为重点不是实现全部功能，而是搞清楚微信小程序开发方法，所以非关注点不用在意。写在前面，但是重点在后面这是教程，也不是教程。可以先看Demo的操作动图，看看是个什么玩意儿，GitHub地址（https://github.com/dunizb/wxapp-sCa...

Hanks10100 2019-08-20 11:29 评论0 收藏0
剖析简易计算器带你入门微信小程序开发

摘要：源码分析这个简易计算器界面布局依然延续祖制，采用布局，貌似微信官方也是这么推荐的官方文档中就是使用。本计算器存在不完善和，因为重点不是实现全部功能，而是搞清楚微信小程序开发方法，所以非关注点不用在意。写在前面，但是重点在后面这是教程，也不是教程。可以先看Demo的操作动图，看看是个什么玩意儿，GitHub地址（https://github.com/dunizb/wxapp-sCa...

RichardXG 2019-08-01 15:47 评论0 收藏0
CSS及布局

摘要：经过半年的打磨，正式发布，主要是新增了一些常用组件，并使用命名，为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看...

jaysun 2019-08-29 14:04 评论0 收藏0