1. 什么是 Flex 布局
Flex 布局是 CSS3 新增的一种弹性布局模型，它的主要作用是为了在不同尺寸和不同设备中，让容器中的子元素能够自动适应并对齐布局。相比传统的盒子模型，在显示方式和排列方式上更加的灵活，可以很好地解决一些传统布局无法解决的一些问题。
2. Flex 布局的基本概念
2.1 重要概念
伸缩容器: 使用 Flex 布局的元素，就是伸缩容器。
伸缩项目: 伸缩容器中的子元素就是伸缩项目。
主轴（main axis）：伸缩容器的主要延伸方向就是主轴。
交叉轴（cross axis）：伸缩容器的垂直于主轴的方向就是交叉轴。
2.2 布局方向
Flex 布局中包含两个重要属性。
flex-direction： 定义主轴的方向，默认值为 row。
flex-wrap： 定义子元素如何换行，默认值为 nowrap。
/* 水平方向，单行显示，一般情况下不需要设置 */
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
/* 水平方向，多行显示 */
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
/* 垂直方向，多行显示 */
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
/* 垂直方向，单行显示 */
.container {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
2.3 对齐方式
Flex 布局中还包含了一些在传统布局中不容易实现的对齐方式，下面介绍这些重要的属性。
justify-content： 定义子元素在主轴上的对齐方式。该属性可接受以下值：
flex-start：默认值，将子元素放置在容器的左端。
flex-end：将子元素放置在容器的右端。
center：将子元素放置在容器的中心。
space-around：子元素会平均分布在容器中，元素周围会存在相同的空间。
space-between：子元素平均分布在容器中，元素之间不存在间隔。
space-evenly：子元素将平均分布在容器中，并且周围间隔相等。
align-items： 定义子元素在交叉轴上的对齐方式。该属性可接受以下值：
stretch：默认值，伸展子元素使其填满该在交叉轴上的剩余空间。
flex-start：将子元素放置在容器的交叉轴起点。
flex-end：将子元素放置在容器的交叉轴结束点。
center：将子元素放置在容器的交叉轴中心位置。
baseline：子元素是按照基线排列。
align-content： 该属性定义了容器中多个行或列在交叉轴上的对齐方式。该属性可接受以下值：
stretch：默认值，各行将会伸展以占据剩余空间。
flex-start：各行将与容器的交叉轴起点对齐。
flex-end：各行将与容器的交叉轴结束点对齐。
center：各行将与容器的交叉轴的中心对齐。
space-between：各行之间平均分布，旁边没有间隔。
space-around：各行之间平均分布，在它们周围存在相同的空间。
3. Flex 布局在小程序中的应用
接下来我们结合小程序应用，来讲解 Flex 布局在小程序中的应用，以解决一些布局问题。
3.1 在小程序中使用 Flex 布局
在小程序中，我们可以通过 view 组件来实现 Flex 布局，下面是一段简单的示例代码：
<view class="container">
<view class="item">A</view>
<view class="item">B</view>
<view class="item">C</view>
</view>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
}
.item {
width: 100px;
height: 100px;
background-color: #999;
margin: 10px;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
在这段示例代码中，我们首先创建了一个 container 的视图容器，并对该容器应用了 flex 布局，并且将子视图居中对齐。接着我们在该视图容器中添加了三个 item 视图，并为这些 item 视图设置了宽高，并使其在水平方向上居中，最终实现了单行显示的效果。
3.2 动态计算宽度并多行居中显示
在开发中，我们有时需要在一个容器中动态地渲染多个元素，并且要求这些元素在多行居中显示。例如在购物车中需要展示多个商品，由于每个商品的宽度不确定且要求多行居中，传统的布局方式无法满足要求。通过 Flex 布局，可以轻松的实现这一需求。
下面是一段示例代码，通过实现一个商品标签的效果，让我们更好地理解 Flex 布局如何应用于解决布局问题。
<view class="tag">
<view class="tags">
<block wx:for="{{tags}}" wx:key="title" wx:for-item="tag" wx:for-index="index">
<view class="tag-item" style="background-color:{{tag.color}};color:white;">{{tag.title}}</view>
</block>
</view>
</view>
.tag {
display: flex;
flex-wrap: wrap;
padding: 10px;
background-color: #f5f5f5;
border-radius: 5px;
}
.tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.tag-item {
padding: 5px;
margin: 5px;
font-size: 12px;
line-height: 1;
border-radius: 5px;
}
在这段示例代码中，我们通过一个 tag 容器来实现。首先为 tag 容器应用 Flex 布局，包含两个子元素 tags 和 tag-item。
在 tags 容器中，我们还为其应用了 align-items: center 属性，使其在交叉轴上居中。在 tag-item 中，我们设置了合适的 padding 和 margin，并且为其设置了圆角达到了商品标签的效果。最终实现了多行居中显示的效果。
4. 总结
Flex 布局可以非常方便地对未知尺寸的子元素进行自适应排列，特别适合在移动端和响应式布局中使用。在小程序中，使用 Flex 布局可以方便地解决一些传统布局无法解决的问题。熟悉和掌握 Flex 布局在小程序中的应用，可以极大地提高我们的小程序的开发效率。