微信小程序中的flex布局,通过()属性控制排列方向。
时间: 2024-03-18 18:44:17 浏览: 156
基于微信小程序的flex布局
在微信小程序中,可以使用 `flex` 布局来控制盒子的排列方向,可以使用 `flex-direction` 属性来控制。默认情况下, `flex-direction` 属性的值为 `row` ,即水平排列。
可以通过在父元素上设置 `flex-direction` 属性来控制子元素的排列方向,常用的取值有以下几种:
- `row`:默认值,水平排列。
- `column`:垂直排列。
- `row-reverse`:水平反向排列。
- `column-reverse`:垂直反向排列。
例如,下面的代码将子元素垂直排列:
```html
<view class="container" style="display: flex;flex-direction: column;">
<view class="item">1</view>
<view class="item">2</view>
<view class="item">3</view>
</view>
```
在上面的代码中,我们在父元素 `container` 上设置了 `flex-direction: column` ,这样子元素就会垂直排列。
阅读全文