更新时间:2019-09-09 15:14
本文介绍 CSS flex 布局的封装(flex)。
属性名 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
direction | 项目定位方向,值可以为 row、row-reverse、column、column-reverse | String | row | false |
wrap | 子元素的换行方式,可选 nowrap、wrap、wrap-reverse | String | nowrap | false |
justify | 子元素在主轴上的对齐方式,可选 start、end、center、between、around | String | start | false |
align | 子元素在交叉轴上的对齐方式,可选 start、center、end、baseline、stretch | String | center | false |
alignContent | 有多根轴线时的对齐方式,可选 start、end、center、between、around、stretch | String | stretch | false |
flex-item 组件默认加上了样式 flex:1
,保证所有 item 平均分宽度,flex 容器的 children 不一定是 flex-item。
{
"defaultTitle": "小程序AntUI组件库",
"usingComponents": {
"flex": "mini-antui/es/flex/index",
"flex-item": "mini-antui/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({});
在文档使用中是否遇到以下问题
更多建议
匿名提交