支付寶小程序擴展組件 布局·Flex

CSS flex 布局的封裝。

掃碼體驗

示例代碼

{
 "defaultTitle": "Flex",
 "usingComponents": {
   "flex": "mini-ali-ui/es/flex/index",
   "flex-item": "mini-ali-ui/es/flex/flex-item/index"
 }
}
<view class="flex-container">
 <view class="sub-title">Basic</view>
 <flex>
   <flex-item><view class="placeholder">Block</view></flex-item>
   <flex-item><view class="placeholder">Block</view></flex-item>
 </flex>
 <view style="height: 20px;" />
 <flex>
   <flex-item><view class="placeholder">Block</view></flex-item>
   <flex-item><view class="placeholder">Block</view></flex-item>
   <flex-item><view class="placeholder">Block</view></flex-item>
 </flex>
 <view style="height: 20px;" />
 <flex>
   <flex-item><view class="placeholder">Block</view></flex-item>
   <flex-item><view class="placeholder">Block</view></flex-item>
   <flex-item><view class="placeholder">Block</view></flex-item>
   <flex-item><view class="placeholder">Block</view></flex-item>
 </flex>
 <view className="sub-title">Wrap</view>
 <flex wrap="wrap">
   <view class="placeholder inline">Block</view>
   <view class="placeholder inline">Block</view>
   <view class="placeholder inline">Block</view>
   <view class="placeholder inline">Block</view>
   <view class="placeholder inline">Block</view>
 </flex>
 <view className="sub-title">Align</view>
 <flex justify="center">
   <view class="placeholder inline">Block</view>
   <view class="placeholder inline">Block</view>
   <view class="placeholder inline">Block</view>
 </flex>
 <flex justify="end">
   <view class="placeholder inline">Block</view>
   <view class="placeholder inline">Block</view>
   <view class="placeholder inline">Block</view>
 </flex>
 <flex justify="between">
   <view class="placeholder inline">Block</view>
   <view class="placeholder inline">Block</view>
   <view class="placeholder inline">Block</view>
 </flex>
 <flex align="start">
   <view class="placeholder inline">Block</view>
   <view class="placeholder inline small">Block</view>
   <view class="placeholder inline">Block</view>
 </flex>
 <flex align="end">
   <view class="placeholder inline">Block</view>
   <view class="placeholder inline small">Block</view>
   <view class="placeholder inline">Block</view>
 </flex>
 <flex align="baseline">
   <view class="placeholder inline">Block</view>
   <view class="placeholder inline small">Block</view>
   <view class="placeholder inline">Block</view>
 </flex>
</view>
.flex-container {
 padding: 10px;
}
.sub-title {
 color: #888;
 font-size: 14px;
 padding: 30px 0 18px 0;
}
.placeholder {
 background-color: #ebebef;
 color: #bbb;
 text-align: center;
 height: 30px;
 line-height: 30px;
 width: 100%;
}
.placeholder.inline {
 width: 80px;
 margin: 9px 9px 9px 0;
}
.placeholder.small {
 height: 20px;
 line-height: 20px
}
Page({});

屬性

Flex 布局是由 flex 和 flex-item 兩種標(biāo)簽組合的，相對應(yīng)的屬性值的情況也有所不同。

flex-item

flex-item 組件默認(rèn)加上了樣式 flex:1，保證所有 item 平均分寬度，flex 容器的 children 不一定是 flex-item。