flex伸缩布局之九宫格

今天做微信小程序的时候，在布局的时候遇到了很大的麻烦，flex布局基本忘了。看了一下阮一峰前辈的博客，然后加上自己的一些理解。

这是九宫格效果图

 这是html结构

 这是css代码（重点，敲黑板）

 首先对基本属性做个简单的介绍，display：flex将盒子转为伸缩盒子，flex-wrap控制当前盒子的内部元素的是否换行（no-wrap不换行, wrap换行, wrap-reverse换行，辅轴方向翻转）； justify-content 控制内部元素在主轴上(默认从左到右，可通过flex-direction进行改变)的对齐方式(flex-start: 主轴开始方向(默认为左), flex-end(默认为右), center在主轴居中，space-between两边贴边中间有空格，space-around空格环绕)，align-items控制内部元素在辅轴上的对齐方式(flex-start(默认为上), flex-end(默认为上),center在辅轴上居中, stretch拉伸和辅轴一样高（长）)。

9空格，每行3个，并且水平垂直居中。首先，9个肯定是分三行显示，所以要给.box 设置换行(flex-wrap: wrap) ,然后每行三个是默认居左的，并且整体9个是居上的， css 13,14行分别控制每行/每列3个.item元素在主轴与辅轴上居中。然后每个.item中的图片和文字是垂直排列，水平垂直居中，你要通过.item控制内部的img和span排列，所以给.item设置display: flex， 并且justify-content控制图片和文字在主轴上居中，此时，img和span是水平排列在.item的中间，但是我们需要他俩垂直排列，所以改变.item的主轴，即flex-direction: column，此时img和span就变成垂直排列，但是两个元素整体贴在左边，并且垂直方向上是居中的，再通过align-items: center控制img和span在父元素中在辅轴方向上居中（辅轴是水平左到右），就实现了整体居中。

总结：justify-content与align-items是在父元素中书写，然后控制其子元素在父元素的主轴与辅轴上的对齐方式。

13,14行控制.item元素在.box中的对齐方式，24,25行控制img与span在.item中的对齐方式