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

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的内容会竖排。