uni-app flex布局

在uni-app中使用flex布局可以通过以下步骤实现：

1. 在需要使用flex布局的组件的父元素上添加样式：display: flex。

2. 可以使用flex属性来控制子元素的布局方式。常用的flex属性包括：

- flex-direction：控制子元素的排列方向，可选值有row（水平排列，默认值）、column（垂直排列）、row-reverse（水平反向排列）、column-reverse（垂直反向排列）。
- justify-content：控制子元素在主轴上的对齐方式，可选值有flex-start（起点对齐，默认值）、center（居中对齐）、flex-end（终点对齐）、space-between（两端对齐，子元素之间间隔平均分配）、space-around（子元素之间间隔平均分配，两端留有空隙）。
- align-items：控制子元素在交叉轴上的对齐方式，可选值有flex-start（起点对齐）、center（居中对齐，默认值）、flex-end（终点对齐）、stretch（拉伸对齐，子元素高度自动匹配父元素高度）、baseline（基线对齐）。

例如，以下样式将子元素在水平方向上居中对齐，垂直方向上起点对齐：

.container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

3. 还可以使用flex-grow属性来控制子元素的伸缩比例，可选值为数字。默认值为0，表示子元素不伸缩。例如，以下样式将两个子元素的宽度分别设置为1和2，即宽度比例为1:2：

.container {
  display: flex;
}

.item1 {
  flex-grow: 1;
}

.item2 {
  flex-grow: 2;
}

通过以上步骤，就可以在uni-app中使用flex布局了。