mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
14 KiB
14 KiB
| title | description | type | group | menuName | icon | order |
|---|---|---|---|---|---|---|
| Flex 布局 | 0 | ⚙ 组件 | Flex 布局 | 47 |
Flex 布局是基于 CSS Flex 实现的布局效果，它比 Grid 和 HBox 对子节点位置的可控性更强，比用 CSS 类的方式更易用，并且默认使用水平垂直居中的对齐。
基本用法
{
"type": "flex",
"items": [{
"style": {
"backgroundColor": "#1A5CFF",
"width": 100,
"height": 50,
"margin": 5
},
"type": "tpl",
"tpl": ""
}, {
"style": {
"backgroundColor": "#46C93A",
"width": 100,
"height": 50,
"margin": 5
},
"type": "tpl",
"tpl": ""
}, {
"style": {
"backgroundColor": "#FF4757",
"width": 100,
"height": 50,
"margin": 5
},
"type": "tpl",
"tpl": ""
}]
}
其中 items 里的每一个都可以是其他 amis 类型。
子节点水平分布
严格来说并不一定是水平，因为还能通过 direction 修改方向，不过这里为了简化就这么称呼了
可以通过 justify 控制水平分布方式，默认是 center 居中，其他几种的示例如下：
{
"type": "page",
"body": [
"center",
{
"type": "flex",
"justify": "center",
"items": [{
"style": {
"backgroundColor": "#1A5CFF",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}, {
"style": {
"backgroundColor": "#46C93A",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}, {
"style": {
"backgroundColor": "#FF4757",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}]
},
"flex-start",
{
"type": "flex",
"justify": "flex-start",
"items": [{
"style": {
"backgroundColor": "#1A5CFF",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}, {
"style": {
"backgroundColor": "#46C93A",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}, {
"style": {
"backgroundColor": "#FF4757",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}]
},
"flex-end",
{
"type": "flex",
"justify": "flex-end",
"items": [{
"style": {
"backgroundColor": "#1A5CFF",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}, {
"style": {
"backgroundColor": "#46C93A",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}, {
"style": {
"backgroundColor": "#FF4757",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}]
},
"space-around",
{
"type": "flex",
"justify": "space-around",
"items": [{
"style": {
"backgroundColor": "#1A5CFF",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}, {
"width": 100,
"height": 30,
"style": {
"backgroundColor": "#46C93A",
"margin": 5
},
"type": "tpl",
"tpl": ""
}, {
"style": {
"backgroundColor": "#FF4757",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}]
},
"space-between",
{
"type": "flex",
"justify": "space-between",
"items": [{
"style": {
"backgroundColor": "#1A5CFF",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}, {
"style": {
"backgroundColor": "#46C93A",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}, {
"style": {
"backgroundColor": "#FF4757",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}]
},
"space-evenly",
{
"type": "flex",
"justify": "space-evenly",
"items": [{
"style": {
"backgroundColor": "#1A5CFF",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}, {
"style": {
"backgroundColor": "#46C93A",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}, {
"style": {
"backgroundColor": "#FF4757",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}]
}
]
}
垂直方向位置
可以通过设置 alignItems 改变在子节点在垂直方向的位置，默认是 center 居中，其他几个常见设置请参考：
{
"type": "page",
"body": [
"center",
{
"type": "flex",
"alignItems": "center",
"style": {
"height": 60,
"backgroundColor": "#fff"
},
"items": [{
"style": {
"backgroundColor": "#1A5CFF",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}, {
"style": {
"backgroundColor": "#46C93A",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}, {
"style": {
"backgroundColor": "#FF4757",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}]
},
{
"type": "divider"
},
"flex-start",
{
"type": "flex",
"alignItems": "flex-start",
"style": {
"height": 60,
"backgroundColor": "#fff"
},
"items": [{
"style": {
"backgroundColor": "#1A5CFF",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}, {
"style": {
"backgroundColor": "#46C93A",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}, {
"style": {
"backgroundColor": "#FF4757",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}]
},
{
"type": "divider"
},
"flex-end",
{
"type": "flex",
"alignItems": "flex-end",
"style": {
"height": 60,
"backgroundColor": "#fff"
},
"items": [{
"style": {
"backgroundColor": "#1A5CFF",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}, {
"style": {
"backgroundColor": "#46C93A",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}, {
"style": {
"backgroundColor": "#FF4757",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}]
}
]
}
布局方向
默认是行的方式，可以通过 "direction": "column" 改成列的方式。
{
"type": "page",
"body": [
"direction: row",
{
"type": "flex",
"items": [{
"style": {
"backgroundColor": "#1A5CFF",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}, {
"style": {
"backgroundColor": "#46C93A",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}, {
"style": {
"backgroundColor": "#FF4757",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}]
},
"direction: column",
{
"type": "flex",
"direction": "column",
"items": [{
"style": {
"backgroundColor": "#1A5CFF",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}, {
"style": {
"backgroundColor": "#46C93A",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}, {
"style": {
"backgroundColor": "#FF4757",
"width": 100,
"height": 30,
"margin": 5
},
"type": "tpl",
"tpl": ""
}]
}
]
}
移动端支持
有时候希望在移动端有不同展现，比如将 direction 改成 column：
{
"type": "flex",
"mobile": {
"direction": "column"
},
"items": [{
"style": {
"backgroundColor": "#1A5CFF",
"width": 100,
"height": 50,
"margin": 5
},
"type": "tpl",
"tpl": ""
}, {
"style": {
"backgroundColor": "#46C93A",
"width": 100,
"height": 50,
"margin": 5
},
"type": "tpl",
"tpl": ""
}, {
"style": {
"backgroundColor": "#FF4757",
"width": 100,
"height": 50,
"margin": 5
},
"type": "tpl",
"tpl": ""
}]
}
其他关于移动端定制的细节请参考这里。
属性表
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | string |
flex |
指定为 Flex 渲染器 |
| className | string |
css 类名 | |
| justify | string |
"start", "flex-start", "center", "end", "flex-end", "space-around", "space-between", "space-evenly" | |
| alignItems | string |
"stretch", "start", "flex-start", "flex-end", "end", "center", "baseline" | |
| style | object |
自定义样式 | |
| items[] | SchemaNode |