今天做微信小程序的时候,在布局的时候遇到了很大的麻烦,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中的对齐方式