【小程序】微信小程序的flex布局详解

文章转载自：三哥的知乎

在微信小程序开发过程中，Flex布局是一个非常重要的部分，其可以简便、完整、响应式地实现各种页面布局。因此Flex布局是一个必学知识点。
flex布局其实很简单，flex布局有三个重要的属性，分别是：flex-direction；justify-content；align-items;

属性介绍

1. flex-derection

该属性常用可选项为row和column。

• row：表示元素横向排列。
• column：表示元素纵向排列。

除了上述两个可选项外，还有row-reverse和column-reverse，它们会对元素的顺序进行反转。

2. justify-content

表示元素在主轴上的排列方式。主轴和flex-direction属性有关。

• flex-start：从主轴起始位置对齐。
• flex-end：从主轴结束位置对齐。
• center：以主轴居中对齐。
• space-between：元素平均分布在主轴上。
• space-around：元素平均分布在主轴上，并且两边留有一定的空间。

3. align-items

表示元素在侧轴上的排列方式。侧轴是相对于主轴而言的。

• stretch：默认值，元素被拉伸以适应容器。
• center：元素位于侧轴中心。
• flex-start：从侧轴开始处对齐。
• flex-end：从侧轴结束处对齐。
• baseline：元素位于容器内基线上。

主轴：如果flex-direction的选项为‘row’，表示容器内的元素横向排列，那么主轴就是水平轴，侧轴就是垂直轴。同理，如果flex-direction的选项为‘column’，表示容器内的元素纵向（竖向）排列，那么主轴就是垂直轴，侧轴就是水平轴。