微信小程序开发入门教程（九）

背景

上一篇文章我们已经介绍了微信小程序布局相关内容，介绍了块级元素、行内元素和行内块元素，与此同时还介绍了浮动与定位，如何解决浮动引起的高度坍塌问题。浮动和定位是基于盒子模型传统的布局解决方案，它在处理一些特殊布局时特别不方便，比如垂直居中，2009年W3C提出了一种新的方案Flex，给传统的盒子模型带来了更大的灵活性，微信小程序的WXSS也对其进行来实现。

Flex布局基本概念

Flex布局主要由容器和项目构成，采用Flex布局的元素成为Flex元素，它所有的子元素自动成为容器成员。可以通过设置display属性为flex或inline-flex将任何一元素指定为Flex布局。如下图所示，容器默认存在两根轴，水平的主轴和垂直的交叉轴，主轴开始的地方叫main start，结束的地方叫main end;交叉轴开始的地方叫cross start,交叉轴结束的地方叫cross end，项目默认沿主轴从主轴开始的地方到主轴结束的位置进行排列，项目在主轴上占据的空间叫main size，在交叉轴上占据的空间叫cross size。

容器属性

display

display用来指定该元素是否为Flex布局，其属性值如下&#