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

每日推荐

推荐一个微信小程序开发必备必看常用的Flex布局模式－wxflex，正在做该方面的或者有兴趣的可以看下。

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

原文地址： http://weappdev.com/t/flex-wxflex/144

前言

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

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

下面说说我在使用Flex布局的案例与使用的时候遇到的那些事，希望对大家有些帮助吧！

骰子布局

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

CSS代码如下：

.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;}

效果图：

image

网格布局

最简单的网格布局，就是平均分布。在容器里面平均分配空间，跟上面的骰子布局很像，但是需要设置项目的自动缩放。

HTML代码如下：

<div class="Grid">   
  <div class="Grid-cell">...</div>   
  <div class="Grid-cell">...</div>   
  <div class="Grid-cell">...</div>
</div>

CSS代码如下：

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

效果图：

image

百分比布局

某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。

HTML代码如下：

<div class="Grid">   
  <div class="Grid-cell u-1of4">...</div>   
  <div class="Grid-cell">...</div>   
  <div class="Grid-cell u-1of3">...</div>
</div>

CSS代码如下：

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

效果图：

image

流式布局

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

HTML代码如下：

<div class="parent">   
  <div class="child">...</div>   
  <div class="child">...</div>   
  <div class="child">...</div>
</div>

CSS代码如下：

.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;
}

效果图：

image

个人案例

image

如果需要这套案例，欢迎关注 【极客小寨】微信公众号，回复小程序flex！获取下载地址，或者回复资源，欢迎关注一起成长！

【极客小寨】：关注、交流、分享,,关于Geekxz的那些事儿,更多分享，请持续关注“极客小寨”

image

很多未公开的、隐藏的功能，用心去发现，惊喜总是会有的！