ColorUI/pages/layout/layout.wxml

<view class="bar solid-bottom">
  <view class='ml-sm'>
    <text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>Flex 布局</text>
  </view>
</view>
<view class="doc-main">
  <view>
    <text class='iconfont icon-title success-text'></text> 固定尺寸
  </view>
  <view class="flex doc-box p-xs mt-sm mb-sm flex-wrap">
    <view class='basis-xs doc-box-sub p-sm m-xs'>xs(20%)</view>
    <view class='basis-df'></view>
    <view class='basis-sm doc-box-sub p-sm m-xs'>sm(40%)</view>
    <view class='basis-df'></view>
    <view class='basis-df doc-box-sub p-sm m-xs'>sub(50%)</view>
    <view class='basis-lg doc-box-sub p-sm m-xs'>lg(60%)</view>
    <view class='basis-xl doc-box-sub p-sm m-xs'>xl(80%)</view>
  </view>
  <view>
    <text class='iconfont icon-title success-text'></text> 比例
  </view>
  <view class="flex doc-box p-xs mt-sm mb-sm">
    <view class='flex-sub doc-box-sub p-sm m-xs'>1</view>
    <view class='flex-sub doc-box-sub p-sm m-xs'>1</view>
  </view>
  <view class="flex doc-box p-xs mt-sm mb-sm">
    <view class='flex-sub doc-box-sub p-sm m-xs'>1</view>
    <view class='flex-twice doc-box-sub p-sm m-xs'>2</view>
  </view>
  <view class="flex doc-box p-xs mt-sm mb-sm">
    <view class='flex-sub doc-box-sub p-sm m-xs'>1</view>
    <view class='flex-twice doc-box-sub p-sm m-xs'>2</view>
    <view class='flex-treble doc-box-sub p-sm m-xs'>3</view>
  </view>
  <view>
    <text class='iconfont icon-title success-text'></text> 水平对齐
  </view>
  <view class="flex doc-box p-xs mt-sm mb-sm justify-start">
    <view class='doc-box-sub p-sm m-xs'>start</view>
    <view class='doc-box-sub p-sm m-xs'>start</view>
  </view>
  <view class="flex doc-box p-xs mt-sm mb-sm justify-end">
    <view class='doc-box-sub p-sm m-xs'>end</view>
    <view class='doc-box-sub p-sm m-xs'>end</view>
  </view>
  <view class="flex doc-box p-xs mt-sm mb-sm justify-center">
    <view class='doc-box-sub p-sm m-xs'>center</view>
    <view class='doc-box-sub p-sm m-xs'>center</view>
  </view>
  <view class="flex doc-box p-xs mt-sm mb-sm justify-between">
    <view class='doc-box-sub p-sm m-xs'>between</view>
    <view class='doc-box-sub p-sm m-xs'>between</view>
  </view>
  <view class="flex doc-box p-xs mt-sm mb-sm justify-around">
    <view class='doc-box-sub p-sm m-xs'>around</view>
    <view class='doc-box-sub p-sm m-xs'>around</view>
  </view>
  <view>
    <text class='iconfont icon-title success-text'></text> 垂直对齐
  </view>
  <view class="flex doc-box p-xs mt-sm mb-sm align-start">
    <view class='doc-box-sub big-sub p-sm m-xs'>ColorUi</view>
    <view class='doc-box-sub p-sm m-xs'>start</view>
  </view>
  <view class="flex doc-box p-xs mt-sm mb-sm align-end">
    <view class='doc-box-sub big-sub p-sm m-xs'>ColorUi</view>
    <view class='doc-box-sub p-sm m-xs'>end</view>
  </view>
  <view class="flex doc-box p-xs mt-sm mb-sm align-center">
    <view class='doc-box-sub big-sub p-sm m-xs'>ColorUi</view>
    <view class='doc-box-sub p-sm m-xs'>center</view>
  </view>
</view>
<view class="bar mt-sm solid-bottom">
  <view class='ml-sm'>
    <text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>内外边距</text>
  </view>
</view>
<view class="doc-main">
  <view>{size}的尺寸有xs/sm/df/lg/xl</view>
  <view class='doc-box flex flex-wrap pv-xs ph-df mt-sm'>
    <view class="basis-df">外边距</view>
    <view class="basis-df">内边距</view>
    <view class="basis-df">.m-{size}</view>
    <view class="basis-df">.p-{size}</view>
  </view>
  <view class='doc-box flex flex-wrap mt-sm  pv-xs ph-df'>
    <view class="basis-df">水平方向外边距</view>
    <view class="basis-df">水平方向内边距</view>
    <view class="basis-df">.mh-{size}</view>
    <view class="basis-df">.ph-{size}</view>
  </view>
  <view class='doc-box flex flex-wrap mt-sm pv-xs ph-df'>
    <view class="basis-df">垂直方向外边距</view>
    <view class="basis-df">垂直方向内边距</view>
    <view class="basis-df">.mv-{size}</view>
    <view class="basis-df">.pv-{size}</view>
  </view>
  <view class='doc-box flex flex-wrap mt-sm pv-xs ph-df'>
    <view class="basis-df">上外边距</view>
    <view class="basis-df">上内边距</view>
    <view class="basis-df">.mt-{size}</view>
    <view class="basis-df">.pt-{size}</view>
  </view>
  <view class='doc-box flex flex-wrap mt-sm pv-xs ph-df'>
    <view class="basis-df">右外边距</view>
    <view class="basis-df">右内边距</view>
    <view class="basis-df">.mr-{size}</view>
    <view class="basis-df">.pr-{size}</view>
  </view>
  <view class='doc-box flex flex-wrap mt-sm pv-xs ph-df'>
    <view class="basis-df">下外边距</view>
    <view class="basis-df">下内边距</view>
    <view class="basis-df">.mb-{size}</view>
    <view class="basis-df">.pb-{size}</view>
  </view>
  <view class='doc-box flex flex-wrap mt-sm pv-xs ph-df'>
    <view class="basis-df">左外边距</view>
    <view class="basis-df">左内边距</view>
    <view class="basis-df">.ml-{size}</view>
    <view class="basis-df">.pl-{size}</view>
  </view>
</view>
<view class="bar mt-sm solid-bottom">
  <view class='ml-sm'>
    <text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>浮动</text>
  </view>
</view>
<view class="doc-main">
  <view class="doc-box cf p-sm">
    <view class='doc-box-sub fl p-sm'>ColorUi fl</view>
    <view class='doc-box-sub fr p-sm'>ColorUi fr</view>
  </view>
</view>