微信小程序开发指南

基于ColorUI的组件化页面开发


水平对齐

Flex布局 - 水平对齐

  • 示例图片

  • 示例代码
  <view class="cu-bar bg-white margin-top solid-bottom">
    <view class="action">
      <text class="cuIcon-title text-blue"></text>水平对齐(justify)
    </view>
  </view>
  <view class="bg-white">
    <view class="flex solid-bottom padding justify-start">
      <view class="bg-grey padding-sm margin-xs radius">start</view>
      <view class="bg-grey padding-sm margin-xs radius">start</view>
    </view>
    <view class="flex solid-bottom padding justify-end">
      <view class="bg-grey padding-sm margin-xs radius">end</view>
      <view class="bg-grey padding-sm margin-xs radius">end</view>
    </view>
    <view class="flex solid-bottom padding justify-center">
      <view class="bg-grey padding-sm margin-xs radius">center</view>
      <view class="bg-grey padding-sm margin-xs radius">center</view>
    </view>
    <view class="flex solid-bottom padding justify-between">
      <view class="bg-grey padding-sm margin-xs radius">between</view>
      <view class="bg-grey padding-sm margin-xs radius">between</view>
    </view>
    <view class="flex solid-bottom padding justify-around">
      <view class="bg-grey padding-sm margin-xs radius">around</view>
      <view class="bg-grey padding-sm margin-xs radius">around</view>
    </view>
  </view>

页面列表

ITEM_HTML