布局

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

Flexbox

卡片的布局模型基于 CSS Flexbox,是一种一维的布局模型,使所有页面元素的排版能够一致可预测,同时布局能适应各种设备或者屏幕尺寸。

image.png

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>
image.png

示例代码

单击此处 detailFlex.zip 获取完整示例代码。

阿里云首页 移动开发平台 mPaaS 相关技术圈