微信小程序开发Flex布局总结

一、首先回顾一下Flex布局的特点：

• 任意方向的伸缩，向左，向右，向下，向上
• 在样式层可以调换和重排顺序
• 主轴和侧轴方便配置
• 子元素的空间拉伸和填充
• 沿着容器对齐

Flex的这些特点使得页面布局可以很好的适应不同的屏幕，更可喜的是，Flex也适用于小程序。如果想要更好的使用Flex，以下内容需要认真查看，最好可以烂熟于心，这样写起页面来便如鱼得水。

二、你不得不弄清楚的基本概念：

• 水平的主轴（main axis）和垂直的交叉轴（cross axis）。
• 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；
• 交叉轴的开始位置叫做cross start，结束位置叫做cross end。
• 设有display:flex或者display:block的元素就是一个flex container(伸缩容器)，里面的子元素称为flex item(伸缩项目)，flex container中子元素都是使用Flex布局排版。
• 元素默认沿主轴排列（当然可以通