前段时间小程序上线后就被废弃了，转而回到web开发，最近又有新的项目，难免需要一些demo来重新熟悉一下，在这个过程中，发现demo中很少有人使用flex布局，今天我就跟大家讲讲这个布局的一点。

flex布局有什么用，最大的效果是快速实现自己需要的布局（水平居中、垂直居中、左右对齐等）。

flex 布局的使用非常简单，在这下面我就介绍几个常见的场景，其他的可以更深入的查找信息（我不会说这是因为我懒惰）。

首先是设置布局容器：flex;

然后，您可以随心所欲地使用两个属性（-（水平）和-（垂直）

）。

例如，垂直居中，这是已知最痛苦的

/* wxml */ 测试用小玩意儿

/* wxss */ view{ width: 100%; height: 100%; display: flex; align-items: center; }

将 - 替换为 -

/* wxml */ 测试用小玩意儿

/* wxss */ view{ width: 100%; height: 100%; display: flex; justify-content: center; }

这两个属性结合在一起

常见的场景不仅在中心布局上，而且难免篇幅过长，而且是带着文字带到这里的，如果你不明白，可以留言问我，或者杜娘/（推荐看阮一峰的教程）。

flex- （改变轴的方向）： row （水平轴，默认） （垂直轴） // 这是比较常见的布局

（轴线示例：父元素使用 flex 布局，默认布局下的块级元素会换行，但设置 flex 布局后，默认都是水平排列的）。

-： flex-（在网格的开头） （在网格的中间） flex-end（在网格的末端） - （在网格上按比例排列子项） - （在网格的两端安排子项）。

-： 同同-

flex-wrap（规定子元素的溢出处理）：（无包装）wrap（顺序包装）wrap-（反向包装）。

flex- （改变轴的方向）： row （水平轴，默认） （垂直轴） // 这是比较常见的布局

（轴线示例：父元素使用 flex 布局，默认布局下的块级元素会换行，但设置 flex 布局后，默认都是水平排列的）。

-： flex-（在网格的开头） （在网格的中间） flex-end（在网格的末端） - （在网格上按比例排列子项） - （在网格的两端安排子项）。

-： 同同-

flex-wrap（规定子元素的溢出处理）：（无包装）wrap（顺序包装）wrap-（反向包装）。