微信小程序开发指南

基于ColorUI的组件化页面开发


比例分布

<h1>Flex布局 - 比例分布</h1> <ul> <li>样式图例</li> </ul> <p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=0ae2b5350add54aa042c86aabf62d397&amp;file=file.png" alt="" /></p> <ul> <li>示例代码</li> </ul> <pre><code class="language-html">&lt;view class="cu-bar bg-white margin-top solid-bottom"&gt; &lt;view class="action"&gt; &lt;text class="cuIcon-title text-blue"&gt;&lt;/text&gt;比例布局 &lt;/view&gt; &lt;/view&gt; &lt;view class="padding bg-white"&gt; &lt;view class="flex"&gt; &lt;view class="flex-sub bg-grey padding-sm margin-xs radius"&gt;1&lt;/view&gt; &lt;view class="flex-sub bg-grey padding-sm margin-xs radius"&gt;1&lt;/view&gt; &lt;/view&gt; &lt;view class="flex p-xs margin-bottom-sm mb-sm"&gt; &lt;view class="flex-sub bg-grey padding-sm margin-xs radius"&gt;1&lt;/view&gt; &lt;view class="flex-twice bg-grey padding-sm margin-xs radius"&gt;2&lt;/view&gt; &lt;/view&gt; &lt;view class="flex p-xs margin-bottom-sm mb-sm"&gt; &lt;view class="flex-sub bg-grey padding-sm margin-xs radius"&gt;1&lt;/view&gt; &lt;view class="flex-twice bg-grey padding-sm margin-xs radius"&gt;2&lt;/view&gt; &lt;view class="flex-treble bg-grey padding-sm margin-xs radius"&gt;3&lt;/view&gt; &lt;/view&gt; &lt;/view&gt;</code></pre>

页面列表

ITEM_HTML