微信小程序开发指南

基于ColorUI的组件化页面开发


比例分布

Flex布局 - 比例分布

  • 样式图例

  • 示例代码
<view class="cu-bar bg-white margin-top solid-bottom">
    <view class="action">
      <text class="cuIcon-title text-blue"></text>比例布局
    </view>
  </view>
  <view class="padding bg-white">
    <view class="flex">
      <view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
      <view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
    </view>
    <view class="flex  p-xs margin-bottom-sm mb-sm">
      <view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
      <view class="flex-twice bg-grey padding-sm margin-xs radius">2</view>
    </view>
    <view class="flex  p-xs margin-bottom-sm mb-sm">
      <view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
      <view class="flex-twice bg-grey padding-sm margin-xs radius">2</view>
      <view class="flex-treble bg-grey padding-sm margin-xs radius">3</view>
    </view>
  </view>

页面列表

ITEM_HTML