小程序教程

微信小程序开发必备必看常用的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等

  1. .first-face {
  2.   display: flex;
  3.   justify-content: center;
  4.   align-items: center;
  5. }

  6. .second-face {
  7.   display: flex;
  8.   justify-content: space-between;
  9. }

  10. .second-pip-2 {
  11.   align-self: flex-end;
  12. }
复制代码




网格布局
主要依赖flex属性

  1. .Grid {
  2.   display: flex;
  3. }
  4. .Grid-cell {
  5.   flex: 1;
  6. }
复制代码


百分比布局

  1. .Grid {
  2.   display: flex;
  3. }

  4. .cell-u-full {
  5.   flex: 0 0 100%;
  6. }
复制代码




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

  1. .parent {
  2.   width: 100%;
  3.   background-color: black;
  4.   display: flex;
  5.   flex-flow: row wrap;
  6.   align-content: flex-start;
  7. }

  8. .child {
  9.   box-sizing: border-box;
  10.   background-color: white;
  11.   flex: 0 0 25%;
  12.   height: 50px;
  13.   border: 1px solid red;
  14. }
复制代码

stream.png

 

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

相关文章
  • 微信小程序 轮播图 swiper图片组件

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

    2016-11-23 09:49

  • 微信小程序 开发 微信开发者工具 快捷键

    微信小程序 开发 微信开发者工具 快捷键

    2016-11-23 09:49

  • 微信小程序 页面跳转 传递参数

    微信小程序 页面跳转 传递参数

    2016-11-23 09:49

  • 微信小程序 如何获取时间

    微信小程序 如何获取时间

    2016-11-23 09:49

网友点评