Flex Message layout

Child elements in the box component of Flex Message are placed according to the methods specified by the properties of the box component and child elements.

This page explains the properties for setting the placement format and how to adjust the size and alignment style of child elements.

Layout types of the box component

There are three layout types for placing components in a box that can be set in the layout property.

Value of the layout property Description
horizontal Components are placed horizontally according to the specified text directionality. A box with this layout type is called a horizontal box. For more information about text directionality, see Setting text directionality.
vertical Components are placed vertically from top to bottom. A box with this layout type is called a vertical box.
baseline Components are placed in the same way as in the horizontal layout property. A box with this layout type is called a baseline box. Unless otherwise stated, the description of the horizontal box also applies to the baseline box.

Characteristics of the baseline box

A baseline box is a special horizontal box whose child elements are vertically aligned with the baseline of text components. Texts with different font sizes are aligned at the baseline.

Note that an icon component can be placed only in a baseline box. The baseline of the icon component is the bottom of the icon image.

Baseline box

Width and height of components

The flex property of a component determines the component's width in a horizontal box and the component's height in a vertical box. Note that the effect of the flex property is different for horizontal and vertical boxes.

Width of components in a horizontal box

The flex property determines the width of components in a horizontal box.

If the value of the flex property is 1 or more, it means the ratio of the component's width within the box.

For example, if you have two components whose flex property is 2 and 3 in a horizontal box with a width of 100, their widths will be 40 and 60, respectively.

flex property example 1

The Flex Message above can be created by the JSON data below.

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "text",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
        "wrap": true,
        "color": "#ff0000",
        "flex": 2
      },
      {
        "type": "text",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
        "wrap": true,
        "color": "#0000ff",
        "flex": 3
      }
    ]
  }
}

If the value of the flex property is 0, the component's width will expand to the full size of its content. However, if the component's width exceeds the box's width, the part of the content that exceeds the box's width will not be displayed.

In the following sample, the box has three components whose flex property is 0, 2, and 3, respectively. The first component's flex property is 0, so a sufficient width is retained to display "Hello" included in the component. Then, the space excluding the first component's width from the box's width is divided at a ratio of two to three and assigned to the second and third components.

flex property example 2

The Flex Message above can be created by the JSON data below.

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "text",
        "text": "Hello",
        "color": "#00ff00",
        "flex": 0
      },
      {
        "type": "text",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
        "wrap": true,
        "color": "#ff0000",
        "flex": 2
      },
      {
        "type": "text",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
        "wrap": true,
        "color": "#0000ff",
        "flex": 3
      }
    ]
  }
}

Height of components in a vertical box

Basically, components in a vertical box are displayed at their original height. However, if the sum of the heights of child components is smaller than the box's height, you can allocate the remaining space to each component by specifying the flex property.

Here is an example of a Flex Message. Both these bubbles have a box with two text components in the right half. The text components are separated by a separator component.

In the left bubble, the flex property of both of the text components has the default value of 0. The text components are displayed at their original height and a blank is displayed in the remaining area.

In the right bubble, the flex property of both of the text components is 1. The remaining space is divided at a ratio of one to one and allocated to each text component. Additionally, text can be vertically center-aligned by setting the gravity property to center.

flex property example 3

The Flex Message above can be created by the JSON data below.

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "image",
            "url": "https://example.com/flex/images/gray.jpg",
            "aspectRatio": "1:2"
          }
        ]
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "flex=1",
            "flex": 1,
            "gravity": "center"
          },
          {
            "type": "separator"
          },
          {
            "type": "text",
            "text": "flex=1",
            "flex": 1,
            "gravity": "center"
          }
        ]
      }
    ]
  }
}

Alignment styles of components

If there is room in the box, you can specify the horizontal and/or vertical alignment style for each component.

Horizontal alignment styles

The align property determines the horizontal alignment style.

align property example

The Flex Message above can be created by the JSON data below.

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "image",
        "url": "https://example.com/flex/images/image.jpg",
        "align": "start"
      },
      {
        "type": "image",
        "url": "https://example.com/flex/images/image.jpg",
        "align": "center"
      },
      {
        "type": "image",
        "url": "https://example.com/flex/images/image.jpg",
        "align": "end"
      }
    ]
  }
}

Vertical alignment styles

The gravity property determines the vertical alignment style. Note that this property is ignored in a baseline box.

gravity property example

The Flex Message above can be created by the JSON data below.

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "image",
        "url": "https://example.com/flex/images/image.jpg"
      },
      {
        "type": "text",
        "text": "top",
        "gravity": "top"
      },
      {
        "type": "text",
        "text": "center",
        "gravity": "center"
      },
      {
        "type": "text",
        "text": "bottom",
        "gravity": "bottom"
      }
    ]
  }
}

Spaces between components

spacing property

The spacing property of the box component determines the minimum space between components in the box.

The Flex Message below has a box component where three image components are placed at equal intervals.

spacing property example

The Flex Message above can be created by the JSON data below.

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "spacing": "md",
    "contents": [
      {
        "type": "image",
        "url": "https://example.com/flex/images/image.jpg"
      },
      {
        "type": "image",
        "url": "https://example.com/flex/images/image.jpg"
      },
      {
        "type": "image",
        "url": "https://example.com/flex/images/image.jpg"
      }
    ]
  }
}

margin property

You can specify the minimum space between certain components by setting the margin property of the subsequent component.

The margin property takes precedence over the spacing property of the parent box.

The Flex Message below has a box component where three image components are placed. The space between the first and second image components are narrow while the space between the second and third image components is wide because the spacing property of the box component is xs while the margin property of the third image component is xl.

margin property example

The Flex Message above can be created by the JSON data below.

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "spacing": "xs",
    "contents": [
      {
        "type": "image",
        "url": "https://example.com/flex/images/image.jpg"
      },
      {
        "type": "image",
        "url": "https://example.com/flex/images/image.jpg"
      },
      {
        "type": "image",
        "url": "https://example.com/flex/images/image.jpg",
        "margin": "xl"
      }
    ]
  }
}