uni-app flex布局
时间: 2023-07-23 09:51:03 浏览: 121
在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布局了。
阅读全文