微信小程序开发必备必看常用的Flex布局模式－wxflex_H5之家 - 中国HTML5教程资源分享第一站

小程序教程

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

字号+ 作者：来源： 2016-11-23 09:49 我要评论( )

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

代码库github地址：https://github.com/icindy/wxflex

官方建议的Flex布局

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

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

骰子布局中主要强调几个属性的使用display justify-contentalign-itemsalign-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;
}

复制代码

　

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章

微信小程序轮播图 swiper图片组件

2016-11-23 09:49
微信小程序开发微信开发者工具快捷键

2016-11-23 09:49
微信小程序页面跳转传递参数

2016-11-23 09:49
微信小程序如何获取时间

2016-11-23 09:49

网友点评

精彩导读

2-HelloWorld微信小程序

微信小程序轮播图 swiper图片组件

微信小程序开发记账应用实战服务端之用户注册

微信小程序倒计时组件

微信小程序实现购物车页面

热门资讯

关注我们

关注微信公众号，了解最新精彩内容

h