什么是蚂蚁动态卡片中的布局样式_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

本文对蚂蚁动态卡片中的布局样式进行说明。

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 获取完整示例代码。