常用样式基础篇（一）弹性布局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;
}

5.绝对垂直居中

.cv{
	display: -webkit-flex;
	display: flex;
	align-items: center;  // 垂直居中
	justify-content:center; // 左右居中
}

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