微信小程序--基础篇（一）弹性布局flex

本文主要介绍小程序一些基础应用。目前只整理了部分弹性盒子flex相关的知识点。

一、弹性盒子布局flex

小程序通过弹性盒子布局，兼容性最佳。在布局方面，尽可能减少左右浮动的使用，将弹性布局样式封装好，具有很大的实用性。下面为大家贴出较为常用的布局样式：

1.space-between左右布局

/* 左右布局 */.space-between {  display: -webkit-flex;  display: flex;  flex-direction: row;  justify-content: space-between;}

2.space-around等间距布局

/* 等间距布局 */.space-around{  display: -webkit-flex;  display: flex;  flex-direction: row;  justify-content: space-around;}

3.nowrap不换行

/* 不换行 */.nowrap{  display: -webkit-flex;  display: flex;  flex-direction: row;  flex-wrap: nowrap;}

4.wrap换行

/* 换行 */.wrap{  display: -webkit-flex;  display: flex;  flex-direction: row;  flex-wrap: wrap;//如果需要进行自动换行，且执行左右或者等间距布局可以对justify-content属性进行控制，此外可以给定子盒子一定的宽度，就能实现float流式布局的效果  justify-content: space-around;}

以上代码存在的一些局限性，所以可以参照阮一峰的弹性盒子的相关介绍链接：
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html