淘宝开放平台

登录
文档中心 > 店铺动态卡片-开发指引

店铺动态卡片-开发指引

Flex Flex布局

更新时间：2020/06/24 访问次数：2615

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-item 组件默认加上了样式flex:1,保证所有 item 平均分宽度, flex 容器的 children 不一定是 flex-item

  

Demo示例

 

示例

 

1
2
3
4
5
6
7
{
  "defaultTitle": "应用AntUI组件库",
  "usingComponents": {
    "flex": "mini-antui/es/flex/index",
    "flex-item": "mini-antui/es/flex/flex-item/index"
  }
}

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<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>

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.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
}

 

1
Page({});

 

FAQ

关于此文档暂时还没有FAQ
有用(0) 我要提问
返回
顶部