# Flex Message layout

You can build complex Flex Messages layouts based on the specification for CSS Flexible Box (CSS Flexbox) (opens new window). The Flex box in the CSS Flexbox specification corresponds to the box component in a Flex Message, and the Flex items in the CSS Flexbox specification correspond to the components in a Flex Message.

This page explains how to adjust the overall layout, as well as the size and alignment of components (child elements) in a box. For more information about the JSON schema, see the Flex Message section of the Messaging API reference.

Types of boxes and the direction of the main axis
- Characteristics of a baseline box
Width and height of components
Component placement
Linear gradient backgrounds
- Direction (angle) of linear gradient backgrounds
- Intermediate color stops for linear gradients
Rendering order

# Types of boxes and the direction of the main axis

There are three types of boxes. The direction of the main axis is determined by a box's type. Specify the type of any box through its layout property.

Box type	`layout` property	Description
Horizontal box	`horizontal`	The main axis is horizontal. Child elements are arranged horizontally. The cross axis is vertical.
Vertical box	`vertical`	The main axis is vertical. Child elements are arranged vertically from top to bottom. The cross axis is horizontal.
Baseline box	`baseline`	The main axis runs in the same direction as a horizontal box. For more information on how this differs from a horizontal box, see Characteristics of a baseline box.

What is the cross axis?

The cross axis is the axis that runs perpendicular to the main axis.

# Characteristics of a baseline box

A baseline box behaves in the same way as a horizontal box. However, its behavior differs from a horizontal box in the following ways.

# Vertical alignment position

Components are vertically aligned so that the baseline of their text is fixed at the same height. Texts with different font sizes are aligned at the baseline.

The baseline of an icon is the bottom of the icon image.

Baseline box

# Available components

A box's type determines which components can be used as child elements.

	Baseline box	Horizontal/vertical box
Box	❌	✅
Button	❌	✅
Image	❌	✅
Icon	✅	❌
Text	✅	✅
Span (can be used as a child element of text)	❌	❌
Separator	❌	✅
Filler (deprecated)	✅	✅

✅ : Can be used as a child element of the box, ❌ : Cannot be used as a child element of the box

# Unavailable properties

You can't use these properties in a child element of a baseline box:

gravity property
offsetBottom property

# Width and height of components

The width or height of components for which the position property is set to relative is decided by the flex property of each component.

# Width of components in a horizontal box

In a horizontal box, if the flex property of the components is set to 1 or higher, the free space is divided among the components on the basis of that value. For components in a horizontal box, the default value of the flex property is 1.

For example, if there are two components in a horizontal box, and the value of the flex property is 2 and 3, the free space (the width of the box in the following example) is divided at a ratio of two to three and assigned to each component.

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 free space (in the following example, the part 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
      }
    ]
  }
}

How this corresponds to 'flex' in CSS Flexbox

The flex property of the component in the horizontal box corresponds to the flex of CSS Flexbox as follows.

When flex = 0: CSS Flexbox flex: 0 0 auto; equivalent layout
When flex = 0 or more: CSS Flexbox flex: X 0 0; equivalent layout (where X is the value of flex)

# Height of components in a vertical box

In a vertical box, if the flex property of the components is set to 1 or a higher value, the free space is divided among the components on the basis of that value. For components in a vertical box, the default value of the flex property is 0.

In the Flex Message below, two vertical boxes are placed in the horizontal box. In addition, one text is placed in the vertical box on the left, and two texts and three separators are placed in the vertical box on the right.

flex property example 5

Each component is laid out according to the rules given below:

Since the vertical box on the left has a height of five rows, the vertical box on the right also has the same height.
The vertical box on the right has some free space that is not filled by two text components (one row each) and three separators alone.
The free space is split up and assigned to the two text components at a 2:3 ratio based on the value of their flex property (2 and 3, respectively).

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": "text",
            "wrap": true,
            "text": "TEXT\nTEXT\nTEXT\nTEXT\nTEXT"
          }
        ],
        "backgroundColor": "#c0c0c0"
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "separator",
            "color": "#ff0000"
          },
          {
            "type": "text",
            "text": "flex=2",
            "flex": 2
          },
          {
            "type": "separator",
            "color": "#ff0000"
          },
          {
            "type": "text",
            "text": "flex=3",
            "flex": 3
          },
          {
            "type": "separator",
            "color": "#ff0000"
          }
        ]
      }
    ]
  }
}

How this corresponds to 'flex' in CSS Flexbox

The flex property of the component in the vertical box corresponds to the flex of CSS Flexbox as follows.

When flex = 0: CSS Flexbox flex: 0 0 auto; equivalent layout
When flex = 0 or more: CSS Flexbox flex: X 0 auto; equivalent layout (where X is the value of flex)

# Box width

You can specify the width of a box with the width property. The value should be given in pixels or as a percentage of the width of the parent element.

Note that if you specify the width property for a box in a horizontal box, the flex property is set equal to 0.

Specifying a value for the 'width' property in pixels

A bubble's width depends on the size of the screen on which it is displayed. Specifying width in pixels to adjust the overall bubble layout may result in an unexpected layout depending on the device. Use the flex property to reduce the effect of screen size.

# Max width of a box

You can specify the max width of a box with the maxWidth property. The value should be given in pixels or as a percentage of the width of the parent element.

If the width of the box calculated from the width property is greater than the width of the box calculated from the maxWidth property, the width of the box will shrink to the value specified by the maxWidth property.

# Box height

You can specify the height of a box with the height property. The value should be given in pixels or as a percentage of the height of the parent element.

Note that if you specify the height property for a box in a vertical box, the flex property is set equal to 0.

# Max height of a box

You can specify the max height of a box with the maxHeight property. The value should be given in pixels or as a percentage of the height of the parent element.

If the height of the box calculated from the height property is greater than the height of the box calculated from the maxHeight property, the height of the box will shrink to the value specified by the maxHeight property.

# Image size

You can set the width of a Flex Message image component in pixels, as a percentage, or with a keyword using the size property. The height is automatically adjusted to preserve the aspect ratio specified in the aspectRatio property.

Unit	Description
Percentage	A percentage of the original image's width. This is expressed as a positive integer or decimal number with `%`. Examples include `50%` and `23.5%`.
Pixels	A positive integer or decimal number that ends in `px`. Examples include `50px` and `23.5px`.
Keywords	Any of these values: `xxs`, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`, `3xl`, `4xl`, `5xl`, or `full`. These values are listed in order of increasing size. The default value is `md`.

# Icon, text, and span size

You can specify a value for the size property of Flex Message icon, text, and span components using any of the following units. These components do not allow the size property to be given as a percentage.

Unit	Description
Pixels	A positive integer or decimal number that ends in `px`. Examples include `50px` and `23.5px`.
Keywords	Any of the following values: `xxs`, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`, `3xl`, `4xl`, or `5xl`. These values are listed in order of increasing size. The default value is `md`.

For more information about the JSON representation of each of these components, see the Flex Message section of the Messaging API reference.

# Size of other components

You can specify the size of some components, such as buttons and images, with a property other than flex. For more information about the JSON schema, see the Flex Message section of the Messaging API reference.

# Automatically shrink fonts to fit

If you specify a value of shrink-to-fit for the adjustMode property of a Flex Message button or text component, the text's font size will automatically shrink to fit. The adjustMode property takes a "best-effort" approach that may work differently—or not at all!—on some platforms.

Automatically shrink fonts to fit

# Component placement

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

# Alignment in horizontal direction

You can use the align property to specify how components should be aligned horizontally. The align property always applies to horizontal placement, regardless of how the parent element (box) has been configured. Specify one of these values:

start: Left-aligned
end: Right-aligned
center: Center-aligned (default value)

align property example

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

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "align=start",
        "align": "start"
      },
      {
        "type": "separator",
        "color": "#ff0000"
      },
      {
        "type": "text",
        "text": "align=center",
        "align": "center"
      },
      {
        "type": "separator",
        "color": "#ff0000"
      },
      {
        "type": "text",
        "text": "align=end",
        "align": "end"
      }
    ]
  }
}

# Alignment in vertical direction

You can use the gravity property to specify how components should be aligned vertically. The gravity property always applies to vertical placement, regardless of how the parent element (box) has been configured. Specify one of these values:

top: Top-aligned (default value)
bottom: Bottom-aligned
center: Center-aligned

Note

This property is ignored in a child element of 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": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "wrap": true,
            "text": "TEXT\nTEXT\nTEXT\nTEXT\nTEXT"
          }
        ],
        "backgroundColor": "#c0c0c0"
      },
      {
        "type": "text",
        "text": "top",
        "gravity": "top"
      },
      {
        "type": "separator",
        "color": "#ff0000"
      },
      {
        "type": "text",
        "text": "center",
        "gravity": "center"
      },
      {
        "type": "separator",
        "color": "#ff0000"
      },
      {
        "type": "text",
        "text": "bottom",
        "gravity": "bottom"
      },
      {
        "type": "separator",
        "color": "#ff0000"
      }
    ]
  }
}

# Box padding

The padding of the box is specified by the paddingAll, paddingTop, paddingBottom, paddingStart, and paddingEnd properties. The padding of the box expresses the size of the free space between the borderline of the box and the child element. You can specify a value in % (the percentage with reference to the width of the box), pixels, or any one of none, xs, sm, md, lg, xl, or xxl as the size. none does not set a space while the other values set a space whose size increases in the order of listing.

If you set paddingTop, paddingBottom, paddingStart, and paddingEnd in addition to paddingAll, the setting of paddingAll will be overwritten.

padding property example

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

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "text",
            "text": "hello, world"
          }
        ],
        "backgroundColor": "#ffffff"
      }
    ],
    "backgroundColor": "#ffd2d2",
    "paddingTop": "20px",
    "paddingAll": "80px",
    "paddingStart": "40px"
  }
}

If you change the text of the Flex Message above, the layout will become as shown below.

padding property example

# Arranging a box's child elements and free space

You can use these properties to configure how child elements and free space are arranged in Flex Message box components.

Arranging child elements along the main axis with the justifyContent property
Arranging child elements along the cross axis with the alignItems property

The direction of the main and cross axes are determined by the parent element (box).

The justifyContent and alignItems properties configure how child elements are placed along the main and cross axes, respectively. The direction of the main and cross axes are determined by the parent element (box).

The main axis, cross axis, and text direction

It's important to note that the text direction (i.e. LTR or RTL), on the other hand, is always applied horizontally regardless of how the parent element (box) has been configured.

# Arranging child elements along the main axis with the `justifyContent` property

The justifyContent property configures how child elements and free space are arranged along the main axis. If the parent element is a horizontal box, the main axis runs in the horizontal direction. If the parent element is a vertical box, the main axis runs in the vertical direction.

flex-start: In a horizontal box, child elements are packed toward the side of the container where text begins. In a vertical box, child elements are packed toward the top of the container.
center: Child elements are all centered within the box.
flex-end: In a horizontal box, child elements are packed toward the side of the container where text ends. In a vertical box, child elements are packed toward the bottom of the container.
space-between: Child elements are evenly distributed in the box. The first and last child elements are placed at the edges of the container. Free space is evenly distributed between the child elements.
space-around: Child elements are evenly distributed in the box. Half of the free space is placed to the left of each child element and the other half is placed to the right.
space-evenly: Child elements are evenly distributed in the box. Free space is evenly distributed on both the left and right sides of each child element.

flex-start flex-center flex-end space-between space-around space-evenly

The figure above makes these assumptions

The parent element is a horizontal box component.
The text direction is "LTR".

For example, a Flex Message configured using flex-start above can be represented by this JSON data.

{
  "type": "bubble",
  "direction": "ltr",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "box",
        "layout": "vertical",
        "contents": [],
        "width": "40px",
        "height": "30px",
        "backgroundColor": "#00aaff",
        "flex": 0
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [],
        "width": "20px",
        "height": "30px",
        "backgroundColor": "#00aaff",
        "flex": 0
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [],
        "height": "30px",
        "width": "50px",
        "backgroundColor": "#00aaff",
        "flex": 0
      }
    ],
    "justifyContent": "flex-start",
    "spacing": "5px"
  }
}

This only works when the 'flex' property is 0.

The justifyContent property only affects how components are arranged along the main axis when there is free space in the parent box. If you specify a value for the justifyContent property of a box with child elements that have positive (non-zero) flex values, no free space is placed in the parent box because its child elements automatically expand to fill it. It's important to note that, by default, the child elements of a horizontal box have their flex property set equal to 1.

# Arranging child elements along the cross axis with the `alignItems` property

The alignItems property configures how child elements and free space are arranged along the cross axis. If the parent element is a horizontal box, the cross axis runs in the vertical direction. If the parent element is a vertical box, the cross axis runs in the horizontal direction.

flex-start: In a horizontal box, child elements are packed toward the top of the container. In a vertical box, child elements are packed toward the side of the container where text begins.
center: Child elements are all centered within the box.
flex-end: In a horizontal box, child elements are packed toward the bottom of the container. In a vertical box, child elements are packed toward the side of the container where text ends.

flex-start center flex-end

The figure above makes these assumptions

The parent element is a horizontal box component.
The text direction is "LTR". (This has no effect on a horizontal box.)

For example, a Flex Message configured using flex-start above can be represented by this JSON data.

{
  "type": "bubble",
  "direction": "ltr",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "box",
        "layout": "vertical",
        "contents": [],
        "height": "100px",
        "backgroundColor": "#00aaff",
        "flex": 0,
        "width": "85px"
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [],
        "height": "30px",
        "backgroundColor": "#00aaff",
        "flex": 0,
        "width": "85px"
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [],
        "height": "60px",
        "backgroundColor": "#00aaff",
        "flex": 0,
        "width": "85px"
      }
    ],
    "spacing": "5px",
    "alignItems": "flex-start",
    "height": "200px"
  }
}

# `spacing` property for boxes

The minimum space between two components is determined by the spacing property of the box (parent element) that contains them. You can specify a value for the spacing property using any of the following units. The spacing property can't be given as a percentage.

Unit	Description
Pixels	A positive integer or decimal number that ends in `px`. Examples include `50px` and `23.5px`.
Keywords	Any of these values: `none`, `xs`, `sm`, `md`, `lg`, `xl`, or `xxl`. A value of `none` indicates that there should be no space; the other values are listed in order of increasing size.

In the Flex Message below, three vertical boxes are spaced evenly (at distance md) within a horizontal box.

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": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "TEXT1"
          }
        ],
        "backgroundColor": "#80ffff"
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "TEXT2"
          }
        ],
        "backgroundColor": "#80ffff"
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "TEXT3"
          }
        ],
        "backgroundColor": "#80ffff"
      }
    ]
  }
}

To override this setting for a specific component, set the margin property of that component.

# `margin` property of components

The value of a component's margin property determines the minimum amount of space to include before it in its parent container. You can specify a value for the margin property using any of the following units. The margin property can't be given as a percentage.

Unit	Description
Pixels	A positive integer or decimal number that ends in `px`. Examples include `50px` and `23.5px`.
Keywords	Any of these values: `none`, `xs`, `sm`, `md`, `lg`, `xl`, or `xxl`. A value of `none` indicates that there should be no space; the other values are listed in order of increasing size.

Note

The margin property takes precedence over a box's spacing property. Space is inserted before the first component in a box if a value has been specified for that component's margin property.

In the Flex Message below, three vertical boxes are placed in the horizontal box. The spacing property of the horizontal box is set to md, and the margin property of the third vertical box is set to xxl.

margin 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": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "TEXT1"
          }
        ],
        "backgroundColor": "#80ffff"
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "TEXT2"
          }
        ],
        "backgroundColor": "#80ffff"
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "TEXT3"
          }
        ],
        "backgroundColor": "#80ffff",
        "margin": "xxl"
      }
    ]
  }
}

# Offset

The placement of the components can be adjusted even by specifying the property below:

position property

The effect of the offset varies depending on the setting of the position property. You cannot specify absolute in the box immediately below the block.
offsetTop property, offsetBottom property, offsetStart property, and offsetEnd property

You can specify a value in % (the percentage with reference to the size of the box), pixels, or any one of none, xs, sm, md, lg, xl, or xxl.

Here, to explain the effect of an offset, the setting of the horizontal box displayed as "TARGET" is changed with reference to the Flex Message below.

offset property example 1

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

{
  "type": "bubble",
  "direction": "ltr",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "text",
            "text": "REFERENCE BOX\n1\n2\n3",
            "align": "center",
            "wrap": true
          }
        ],
        "backgroundColor": "#80ffff"
      },
      {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "text",
            "text": "TARGET"
          }
        ],
        "backgroundColor": "#ff8080"
      }
    ]
  }
}

# When the `position` property has a value of `relative`

To perform alignment with reference to the regular position of components, set the position property to relative, and then specify the offset properties below. The position can be determined by a similar concept as Relative positioning (opens new window) of CSS Positioned Layout Module Level 3.

Property	Description
`offsetTop`	Specifies the amount by which the top edge of the element moves from the regular position.
`offsetBottom`	Specifies the amount by which the bottom edge of the element moves from the regular position.
`offsetStart`	If the text directionality in the bubble is LTR	Specifies the amount by which the left edge of the element moves from the regular position.
`offsetStart`	If the text directionality in the bubble is RTL	Specifies the amount by which the right edge of the element moves from the regular position.
`offsetEnd`	If the text directionality in the bubble is LTR	Specifies the amount by which the right edge of the element moves from the regular position.
`offsetEnd`	If the text directionality in the bubble is RTL	Specifies the amount by which the left edge of the element moves from the regular position.

This example demonstrates how offsets work by showing the "TARGET" box in different positions.

Property	Value
`position`	`relative`
`offsetTop`	`10px`
`offsetBottom`	-
`offsetStart`	`40px`
`offsetEnd`	-

The first bubble is before changing the setting, and the second bubble is after changing the setting.

offset property example 1 offset property example 2

The second Flex Message above can be created with this JSON data below.

{
  "type": "bubble",
  "direction": "ltr",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "text",
            "text": "REFERENCE BOX\n1\n2\n3",
            "align": "center",
            "wrap": true
          }
        ],
        "backgroundColor": "#80ffff"
      },
      {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "text",
            "text": "TARGET"
          }
        ],
        "backgroundColor": "#ff8080",
        "offsetTop": "10px",
        "offsetStart": "40px",
        "position": "relative"
      }
    ]
  }
}

# When the `position` property has a value of `absolute`

To place the components with reference to the outer frame of the parent element, set the position property to absolute, and then specify the offset properties below. Layout can be performed by a method similar to that of Absolute positioning (opens new window) of CSS Positioned Layout Module Level 3.

Property	Description
`offsetTop`	Specifies the relative position from the upper end of the parent element to the upper end of the component.
`offsetBottom`	Specifies the relative position from the lower end of the parent element to the lower end of the component.
`offsetStart`	If the text directionality in the bubble is LTR	Specifies the relative position from the left end of the parent element to the left end of the component.
`offsetStart`	If the text directionality in the bubble is RTL	Specifies the relative position from the right end of the parent element to the right end of the component.
`offsetEnd`	If the text directionality in the bubble is LTR	Specifies the relative position from the right end of the parent element to the right end of the component.
`offsetEnd`	If the text directionality in the bubble is RTL	Specifies the relative position from the left end of the parent element to the left end of the component.

Note

If the offset property is not specified, the position of the component may vary from screen to screen. We recommend explicitly specifying offsets both vertically (offsetTop or offsetBottom) and horizontally (offsetStart or offsetEnd).

The following example demonstrates how offsets work by showing the "TARGET" box in different positions.

Property	Value
`position`	`absolute`
`offsetTop`	`10px`
`offsetBottom`	`20px`
`offsetStart`	`40px`
`offsetEnd`	`80px`

The first bubble is before changing the setting, and the second bubble is after changing the setting.

offset property example 1 offset property example 3

The second Flex Message above can be created with this JSON data below.

{
  "type": "bubble",
  "direction": "ltr",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "text",
            "text": "REFERENCE BOX\n1\n2\n3",
            "align": "center",
            "wrap": true
          }
        ],
        "backgroundColor": "#80ffff"
      },
      {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "text",
            "text": "TARGET"
          }
        ],
        "backgroundColor": "#ff8080",
        "position": "absolute",
        "offsetStart": "40px",
        "offsetEnd": "80px",
        "offsetTop": "10px",
        "offsetBottom": "20px"
      }
    ]
  }
}

# About the size of the parent element and component

A box in which the position property is set to absolute does not affect the size of the parent element, and is also not affected by the parent element. Therefore, in the case of a component that is larger than the parent element, a part of the component is not displayed. If the component becomes larger due to the effect of the parent element (free space), it returns to its original size.

The next example shows a "REFERENCE BOX" in different positions.

Property	Value
`position`	`absolute`

The first bubble is before changing the setting, and the second bubble is after changing the setting.

offset property example 1 offset property example 4

The size of "REFERENCE BOX" does not affect the size of the parent element (vertical box), and is also not affected by the parent element. Therefore, portions larger than the parent element (rows "2" and "3") are not displayed. Moreover, the free space on the left and right that has become larger due to the effect of the parent element (free space) returns to its original size (width of the text "REFERENCE BOX").

# Linear gradient backgrounds

You can create a background that's a linear gradient in a Flex Message box component by setting the background.type property equal to linearGradient.

The parent element's text direction doesn't affect the direction of the gradient

The parent element's text direction (LTR or RTL) doesn't affect the direction of the gradient.

# Direction (angle) of linear gradient backgrounds

You can specify the angle at which a linear gradient moves as an integer or decimal number in the half-open interval [0, 360). For example, 90deg represents a 90-degree angle and 23.5deg represents a 23.5-degree angle. The angle of the linear gradient rotates clockwise as the numbers increase such that a gradient created with a value of 0deg starts at the bottom and ends at the top; a gradient created with a value of 45deg starts at the bottom-left corner and ends at the top-right corner; a gradient created with a value of 90deg starts at the left and ends at the right; and a gradient created with a value of 180deg starts at the top and ends at the bottom.

Linear gradient at 0 degrees (from bottom to top)

Linear gradient at 0 degrees

The Flex Message above can be created by this JSON data.

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [],
    "background": {
      "type": "linearGradient",
      "angle": "0deg",
      "startColor": "#ff0000",
      "endColor": "#0000ff"
    },
    "height": "200px"
  }
}

Linear gradient at 45 degrees (from the bottom-left corner to the top-right corner)
Linear gradient at 90 degrees (from left to right)
Linear gradient at 180 degrees (from top to bottom)

For more information, see the Box component in the Messaging API reference.

# Intermediate color stops for linear gradients

Specify an intermediate color stop with the centerColor property to create a gradient that has three colors. You can specify the position of the intermediate color stop using the centerPosition property.

Gradient with an intermediate color stop at the 10% mark from the starting point

Three-color gradient with an intermediate color stop at the 10% mark from the starting point

The Flex Message above can be created by this JSON data.

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [],
    "background": {
      "type": "linearGradient",
      "angle": "0deg",
      "startColor": "#ff0000",
      "centerColor": "#0000ff",
      "endColor": "#00ff00",
      "centerPosition": "10%"
    },
    "height": "200px"
  }
}

Gradient with an intermediate color stop at the 50% mark from the starting point
Gradient with an intermediate color stop at the 90% mark from the starting point

# About the order of rendering

Components are rendered in the order of JSON data. That is, the component written at the beginning of the JSON data is rendered right at the back, and the component written at the end is rendered right in the front of the bubble.

To change the order of rendered, change the order of components in the JSON data.

# Flex Message layout

# Types of boxes and the direction of the main axis

# Characteristics of a baseline box

# Vertical alignment position

# Available components

# Unavailable properties

# Width and height of components

# Width of components in a horizontal box

# Height of components in a vertical box

# Box width

# Max width of a box

# Box height

# Max height of a box

# Image size

# Icon, text, and span size

# Size of other components

# Automatically shrink fonts to fit

# Component placement

# Alignment in horizontal direction

# Alignment in vertical direction

# Box padding

# Arranging a box's child elements and free space

# Arranging child elements along the main axis with the justifyContent property

# Arranging child elements along the cross axis with the alignItems property

# spacing property for boxes

# margin property of components

# Offset

# When the position property has a value of relative

# When the position property has a value of absolute

# About the size of the parent element and component

# Linear gradient backgrounds

# Direction (angle) of linear gradient backgrounds

# Intermediate color stops for linear gradients

# About the order of rendering

# Related pages

# Arranging child elements along the main axis with the `justifyContent` property

# Arranging child elements along the cross axis with the `alignItems` property

# `spacing` property for boxes

# `margin` property of components

# When the `position` property has a value of `relative`

# When the `position` property has a value of `absolute`