支付宝小程序扩展组件 布局·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。