微信小程序开发（七） view 组件

view 组件的示例代码之横向布局和纵向布局

wxml

<view class="section"><view class="section_title">flex-direction:rowview><view class="section_title">横向布局view><view class="flex-wrp" style="flex-direction: row;"><view class="flex-item bc_green">1view><view class="flex-item bc_red">2view><view class="flex-item bc_blue">3view>view>view><view class="section"><view class="section_title">flex-direction: columnview><view class="section_title">纵向布局view><view class="flex-wrp" style="flex-direction: column;"><view class="flex-item bc_green">1view><view class="flex-item bc_red">2view><view class="flex-item bc_blue">3view>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>1view><view>2view><view>3view>
view><view class="container-2" style="display: flex; flex-direction: column;"><view>4view><view>5view><view>6view>
view>

container-1 的内容会横向排列，container-2的内容会竖排。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！