mirror of
https://github.com/weilanwl/coloruicss.git
synced 2026-03-08 07:14:00 +08:00
134 lines
5.4 KiB
Plaintext
134 lines
5.4 KiB
Plaintext
<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> |