本文对蚂蚁动态卡片中的布局样式进行说明。
Flexbox
卡片的布局模型基于 CSS Flexbox，是一种一维的布局模型，使所有页面元素的排版能够一致可预测，同时布局能适应各种设备或者屏幕尺寸。
Flex 容器
卡片中，Flexbox 是唯一的布局模型，需设置 display:flex。如果一个卡片元素可以嵌套容纳其他元素，那么它就成为 Flex 容器。
属性 | 描述 | 值类型 | 默认值 | 可选值 | 写法 | 备注 |
display | flex 布局 | string | flex | flex | display:flex | 需要显示指定节点为 flex 布局。 |
与 Web 的差异在于 text 节点计算。即在卡片中，text 节点的 size 不会大于其父节点的 size。
属性 | 描述 | 值类型 | 默认值 | 可选值 | 写法 | 备注 |
flex-wrap | 决定了 flex 成员项在一行还是多行分布。 | string | nowrap | wrap、nowrap | flex-wrap:wrap; | |
flex-direction | 定义 flex 成员项的排列方向。 | string | column | column、row、row-reverse、column-reverse | flex-direction:row; | |
align-items | 定义 flex 成员项在纵轴方向上如何排列以处理空白部分。 | string | stretch | stretch、center、flex-start、flex-end、baseline | align-items:center; | |
align-content | 定义 flex 成员项如何沿着纵轴在内容项之间和周围分配空间。 | string | flex-start（web: stretch） | auto、stretch、center、flex-start、flex-end | align-content:center; | flex-wrap: 为 nowrap 时无效。 |
justify-content | 定义 flex 成员项在主轴方向上如何排列以处理空白部分。 | string | flex-stat | flex-start、flex-end、center、space-between、space-around | justify-content:center; |
Flex 成员
与 Web 的差异在于：
text 节点计算：在没有设置 width、height 的情况下，卡片中 text 节点在 yoga 的计算中作为外部计算 size 的节点，并且计算的结果会遵循 flex 约束再次调整；而 Web 中 text 节点会根据内容计算 size，并且不受 flex 条件的约束。
flex-basis 差异：在没有设置 width、height 的情况下，卡片中设置 flex-basis 后，会根据 flex-basis 的值为初始值来参与 flex 样式的计算，不会再考虑内容实际 size；而 Web 中则不会考虑 flex 约束，而使用内容实际 size 进行布局。
属性 | 描述 | 值类型 | 默认值 | 可选值 | 写法 | 备注 |
flex | 定义了 flex 成员项可以占用容器中剩余空间的大小。 | 长度单位或百分比 | 0 | flex:1; flex:1 1 30px; | 支持 flex: <flex-grow> | <flex-shrink> | <'flex-basis> 的简写。 | |
flex-grow | 定义了 flex 成员项在有可用剩余空间时拉伸比例。 | 长度单位 | 0 | flex-grow: 1; | ||
flex-shrink | 定义了 flex 成员项的收缩的能力。 | 长度单位 | 0（web：1） | flex-shrink: 1; | ||
flex-basis | 定义了在分配剩余空间之前 flex 成员项默认的大小。 | 长度单位或百分比 | auto | auto、像素值、百分比 | flex-basis: auto; flex-basis: 50px; flex-basis: 30%; | |
align-self | 允许某个单独的 flex 成员项覆盖默认的对齐方式。 | string | auto | auto、center、 stretch、flex-start、flex-end | align-self:flex-start; |
定位
支持定位（position）。position 属性规定元素的定位类型后，可通过 top、bottom、left、right 四个属性设置坐标。
属性 | 描述 | 值类型 | 默认值 | 可选值 | 写法 |
position | 定位类型 | string | relative | relative、absolute、fixed | position: fixed; |
top | 距离上方的偏移量 | 长度单位或百分比 | 0 | top: 10px; | |
bottom | 距离下方的偏移量 | 长度单位或百分比 | 0 | bottom: 10px; | |
left | 距离左方的偏移量 | 长度单位或百分比 | 0 | left: 10px; | |
right | 距离右方的偏移量 | 长度单位或百分比 | 0 | right: 10px; |
其他
属性 | 描述 | 值类型 | 默认值 | 可选值 | 写法 |
overflow | 控制内容溢出元素框时内容是否被裁剪 | string | visible | visible，hidden | overflow:hidden; |
visibility | 指定一个元素是否是可见的 | string | visible | visible，hidden | visibility:hidden; |
Flexbox 的基本用法
下面是 Flexbox 的一个基本用法示例。
当使用属性的简写方式时，简写中没写的样式，将按照默认值处理。
当属性的简写与非简写同时存在，遵循后者覆盖前者的原则。
.flex-container {
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
flex-direciton: row;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
<div class="flex-container">
<text class="flex-item">flex item 1</text>
<text class="flex-item">flex item 2</text>
<text class="flex-item">flex item 3</text>
</div>
示例代码
单击此处 detailFlex.zip 获取完整示例代码。