支付宝小程序扩展组件布局·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 两种标签组合的，相对应的属性值的情况也有所不同。

属性	类型	描述	默认值	可选值	必填
direction	String	项目定位方向。	row	row、row-reverse、column、olumn-reverse	false
wrap	String	子元素的换行方式。	nowrap	nowrap、wrap、rap-reverse	false
justify	String	子元素在主轴上的对齐方式。	start	start、end、center、between、around	false
align	String	子元素在交叉轴上的对齐方式。	center	start、center、end、baseline、stretch	false
alignContent	String	有多根轴线时的对齐方式。	stretch	start、end、center、between、around、stretch	false

flex-item

flex-item 组件默认加上了样式 flex:1，保证所有 item 平均分宽度，flex 容器的 children 不一定是 flex-item。

支付宝小程序扩展组件 布局·Flex

扫码体验

示例代码

属性

flex-item

支付宝小程序扩展组件布局·Flex