2021-03-15 10:30:39 +08:00
|
|
|
|
---
|
|
|
|
|
|
title: Flex 布局
|
|
|
|
|
|
description:
|
|
|
|
|
|
type: 0
|
|
|
|
|
|
group: ⚙ 组件
|
|
|
|
|
|
menuName: Flex 布局
|
|
|
|
|
|
icon:
|
|
|
|
|
|
order: 47
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
Flex 布局是基于 CSS Flex 实现的布局效果，它比 Grid 和 HBox 对子节点位置的可控性更强，比用 CSS 类的方式更易用，并且默认使用水平垂直居中的对齐。
|
|
|
|
|
|
|
|
|
|
|
|
## 基本用法
|
|
|
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
|
{
|
|
|
|
|
|
"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` 居中，其他几种的示例如下：
|
|
|
|
|
|
|
2022-02-10 20:15:39 +08:00
|
|
|
|
```schema
|
2021-03-15 10:30:39 +08:00
|
|
|
|
{
|
|
|
|
|
|
"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` 居中，其他几个常见设置请参考：
|
|
|
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
|
{
|
|
|
|
|
|
"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" 改成列的方式。
|
|
|
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
|
{
|
|
|
|
|
|
"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`：
|
|
|
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
|
{
|
|
|
|
|
|
"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": ""
|
|
|
|
|
|
}]
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
其他关于移动端定制的细节请参考[这里](../docs/extend/mobile)。
|
|
|
|
|
|
|
|
|
|
|
|
## 属性表
|
|
|
|
|
|
|
|
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
|
| ---------- | -------------------------------------- | ------ | --------------------------------------------------------------------------------------------------- |
|
|
|
|
|
|
| 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](../docs/types/schemanode) | |
|
