view 组件的示例代码之横向布局和纵向布局
wxml
<view class="section">
<view class="section_title">flex-direction:row</view>
<view class="section_title">横向布局</view>
<view class="flex-wrp" style="flex-direction: row;">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
<view class="section">
<view class="section_title">flex-direction: column</view>
<view class="section_title">纵向布局</view>
<view class="flex-wrp" style="flex-direction: column;">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
wxss
.section {
/* 设置section距顶部的距离 */
margin-top: 20rpx;
}
.flex-wrp {
display: flex;
margin-top: 10rpx;
}
.flex-item {
/* 设置宽和高 */
width: 200rpx;
height: 300rpx;
/* 设置字体大小 */
font-size: 26rpx;
/* 设置内容居中 */
display: flex;
justify-content: center;
align-items: center;
}
/* 设置背景颜色 */
.bc_green {
background-color: green;
}
.bc_red {
background-color: red;
}
.bc_blue {
background-color: blue;
}
对于 view 组件,使用 style="display: flex; flex-direction: column;"
来控制view的方向,默认是 flex-direction: column
, 设置为 flex-direction: row
则会显示为横向排列。举个简单的例子:
<view class="container-1" style="display: flex; flex-direction: row;">
<view>1</view>
<view>2</view>
<view>3</view>
</view>
<view class="container-2" style="display: flex; flex-direction: column;">
<view>4</view>
<view>5</view>
<view>6</view>
</view>
container-1 的内容会横向排列,container-2的内容会竖排。