ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
![](https://img.kancloud.cn/0a/3c/0a3c2b78dc223070d2ae30c54c572d9f_373x316.png) ``` <view class="cu-bar bg-white solid-bottom margin-top"> <view class="action"> <text class="cuIcon-title text-blue"></text>固定尺寸 </view> </view> <view class="padding bg-white"> <view class="flex flex-wrap"> <view class="basis-xs bg-grey margin-xs padding-sm radius">xs(20%)</view> <view class="basis-df"></view> <view class="basis-sm bg-grey margin-xs padding-sm radius">sm(40%)</view> <view class="basis-df"></view> <view class="basis-df bg-grey margin-xs padding-sm radius">sub(50%)</view> <view class="basis-lg bg-grey margin-xs padding-sm radius">lg(60%)</view> <view class="basis-xl bg-grey margin-xs padding-sm radius">xl(80%)</view> </view> </view> ``` ![](https://img.kancloud.cn/39/e2/39e24a6791194edbc018334e1a2737dd_478x289.png) ``` <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> ``` ![](https://img.kancloud.cn/76/7b/767bd63e2e604565798126b5d170cce7_481x518.png) ``` <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> ``` ![](https://img.kancloud.cn/40/89/4089426e49b750817f720a964113ad6e_481x419.png) ``` <view class="cu-bar bg-white margin-top solid-bottom"> <view class="action"> <text class="cuIcon-title text-blue"></text>垂直对齐(align) </view> </view> <view class="bg-white"> <view class="flex solid-bottom padding align-start"> <view class="bg-grey padding-lg margin-xs radius">ColorUi</view> <view class="bg-grey padding-sm margin-xs radius">start</view> </view> <view class="flex solid-bottom padding align-end"> <view class="bg-grey padding-lg margin-xs radius">ColorUi</view> <view class="bg-grey padding-sm margin-xs radius">end</view> </view> <view class="flex solid-bottom padding align-center"> <view class="bg-grey padding-lg margin-xs radius">ColorUi</view> <view class="bg-grey padding-sm margin-xs radius">center</view> </view> </view> ```