Flex 布局

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”: “” }] }

  2. 其中 `items` 里的每一个都可以是其他 amis 类型。
  4. ## 子节点水平分布
  6. > 严格来说并不一定是水平，因为还能通过 direction 修改方向，不过这里为了简化就这么称呼了
  8. 可以通过 justify 控制水平分布方式，默认是 `center` 居中，其他几种的示例如下：
  10. ```schema
  11. {
  12.     "type": "page",
  13.     "body": [
  14.         "center",
  15.         {
  16.             "type": "flex",
  17.             "justify": "center",
  18.             "items": [{
  19.                 "style": {
  20.                     "backgroundColor": "#1A5CFF",
  21.                     "width": 100,
  22.                     "height": 30,
  23.                     "margin": 5
  24.                 },
  25.                 "type": "tpl",
  26.                 "tpl": ""
  27.             }, {
  28.                 "style": {
  29.                     "backgroundColor": "#46C93A",
  30.                     "width": 100,
  31.                     "height": 30,
  32.                     "margin": 5
  33.                 },
  34.                 "type": "tpl",
  35.                 "tpl": ""
  36.             }, {
  37.                 "style": {
  38.                     "backgroundColor": "#FF4757",
  39.                     "width": 100,
  40.                     "height": 30,
  41.                     "margin": 5
  42.                 },
  43.                 "type": "tpl",
  44.                 "tpl": ""
  45.             }]
  46.         },
  47.         "flex-start",
  48.         {
  49.             "type": "flex",
  50.             "justify": "flex-start",
  51.             "items": [{
  52.                 "style": {
  53.                     "backgroundColor": "#1A5CFF",
  54.                     "width": 100,
  55.                     "height": 30,
  56.                     "margin": 5
  57.                 },
  58.                 "type": "tpl",
  59.                 "tpl": ""
  60.             }, {
  61.                 "style": {
  62.                     "backgroundColor": "#46C93A",
  63.                     "width": 100,
  64.                     "height": 30,
  65.                     "margin": 5
  66.                 },
  67.                 "type": "tpl",
  68.                 "tpl": ""
  69.             }, {
  70.                 "style": {
  71.                     "backgroundColor": "#FF4757",
  72.                     "width": 100,
  73.                     "height": 30,
  74.                     "margin": 5
  75.                 },
  76.                 "type": "tpl",
  77.                 "tpl": ""
  78.             }]
  79.         },
  80.         "flex-end",
  81.         {
  82.             "type": "flex",
  83.             "justify": "flex-end",
  84.             "items": [{
  85.                 "style": {
  86.                     "backgroundColor": "#1A5CFF",
  87.                     "width": 100,
  88.                     "height": 30,
  89.                     "margin": 5
  90.                 },
  91.                 "type": "tpl",
  92.                 "tpl": ""
  93.             }, {
  94.                 "style": {
  95.                     "backgroundColor": "#46C93A",
  96.                     "width": 100,
  97.                     "height": 30,
  98.                     "margin": 5
  99.                 },
  100.                 "type": "tpl",
  101.                 "tpl": ""
  102.             }, {
  103.                 "style": {
  104.                     "backgroundColor": "#FF4757",
  105.                     "width": 100,
  106.                     "height": 30,
  107.                     "margin": 5
  108.                 },
  109.                 "type": "tpl",
  110.                 "tpl": ""
  111.             }]
  112.         },
  113.         "space-around",
  114.         {
  115.             "type": "flex",
  116.             "justify": "space-around",
  117.             "items": [{
  118.                 "style": {
  119.                     "backgroundColor": "#1A5CFF",
  120.                     "width": 100,
  121.                     "height": 30,
  122.                     "margin": 5
  123.                 },
  124.                 "type": "tpl",
  125.                 "tpl": ""
  126.             }, {
  127.                 "width": 100,
  128.                 "height": 30,
  129.                 "style": {
  130.                     "backgroundColor": "#46C93A",
  131.                     "margin": 5
  132.                 },
  133.                 "type": "tpl",
  134.                 "tpl": ""
  135.             }, {
  136.                 "style": {
  137.                     "backgroundColor": "#FF4757",
  138.                     "width": 100,
  139.                     "height": 30,
  140.                     "margin": 5
  141.                 },
  142.                 "type": "tpl",
  143.                 "tpl": ""
  144.             }]
  145.         },
  146.         "space-between",
  147.         {
  148.             "type": "flex",
  149.             "justify": "space-between",
  150.             "items": [{
  151.                 "style": {
  152.                     "backgroundColor": "#1A5CFF",
  153.                     "width": 100,
  154.                     "height": 30,
  155.                     "margin": 5
  156.                 },
  157.                 "type": "tpl",
  158.                 "tpl": ""
  159.             }, {
  160.                 "style": {
  161.                     "backgroundColor": "#46C93A",
  162.                     "width": 100,
  163.                     "height": 30,
  164.                     "margin": 5
  165.                 },
  166.                 "type": "tpl",
  167.                 "tpl": ""
  168.             }, {
  169.                 "style": {
  170.                     "backgroundColor": "#FF4757",
  171.                     "width": 100,
  172.                     "height": 30,
  173.                     "margin": 5
  174.                 },
  175.                 "type": "tpl",
  176.                 "tpl": ""
  177.             }]
  178.         },
  179.         "space-evenly",
  180.         {
  181.             "type": "flex",
  182.             "justify": "space-evenly",
  183.             "items": [{
  184.                 "style": {
  185.                     "backgroundColor": "#1A5CFF",
  186.                     "width": 100,
  187.                     "height": 30,
  188.                     "margin": 5
  189.                 },
  190.                 "type": "tpl",
  191.                 "tpl": ""
  192.             }, {
  193.                 "style": {
  194.                     "backgroundColor": "#46C93A",
  195.                     "width": 100,
  196.                     "height": 30,
  197.                     "margin": 5
  198.                 },
  199.                 "type": "tpl",
  200.                 "tpl": ""
  201.             }, {
  202.                 "style": {
  203.                     "backgroundColor": "#FF4757",
  204.                     "width": 100,
  205.                     "height": 30,
  206.                     "margin": 5
  207.                 },
  208.                 "type": "tpl",
  209.                 "tpl": ""
  210.             }]
  211.         }
  212.     ]
  213. }

垂直方向位置

可以通过设置 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”: “” }] } ] }

  2. ## 布局方向
  4. 默认是行的方式，可以通过 "direction": "column" 改成列的方式。
  6. ```schema: scope="body"
  7. {
  8.     "type": "page",
  9.     "body": [
  10.         "direction: row",
  11.         {
  12.             "type": "flex",
  13.             "items": [{
  14.                 "style": {
  15.                     "backgroundColor": "#1A5CFF",
  16.                     "width": 100,
  17.                     "height": 30,
  18.                     "margin": 5
  19.                 },
  20.                 "type": "tpl",
  21.                 "tpl": ""
  22.             }, {
  23.                 "style": {
  24.                     "backgroundColor": "#46C93A",
  25.                     "width": 100,
  26.                     "height": 30,
  27.                     "margin": 5
  28.                 },
  29.                 "type": "tpl",
  30.                 "tpl": ""
  31.             }, {
  32.                 "style": {
  33.                     "backgroundColor": "#FF4757",
  34.                     "width": 100,
  35.                     "height": 30,
  36.                     "margin": 5
  37.                 },
  38.                 "type": "tpl",
  39.                 "tpl": ""
  40.             }]
  41.         },
  42.         "direction: column",
  43.         {
  44.             "type": "flex",
  45.             "direction": "column",
  46.             "items": [{
  47.                 "style": {
  48.                     "backgroundColor": "#1A5CFF",
  49.                     "width": 100,
  50.                     "height": 30,
  51.                     "margin": 5
  52.                 },
  53.                 "type": "tpl",
  54.                 "tpl": ""
  55.             }, {
  56.                 "style": {
  57.                     "backgroundColor": "#46C93A",
  58.                     "width": 100,
  59.                     "height": 30,
  60.                     "margin": 5
  61.                 },
  62.                 "type": "tpl",
  63.                 "tpl": ""
  64.             }, {
  65.                 "style": {
  66.                     "backgroundColor": "#FF4757",
  67.                     "width": 100,
  68.                     "height": 30,
  69.                     "margin": 5
  70.                 },
  71.                 "type": "tpl",
  72.                 "tpl": ""
  73.             }]
  74.         }
  75.     ]
  76. }

移动端支持

有时候希望在移动端有不同展现，比如将 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": "" }] }

其他关于移动端定制的细节请参考这里。

属性表

属性名 类型 默认值 说明
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