# 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
- Width and height of components
- Component placement
- Linear gradient backgrounds
- 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. |
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.
# 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
propertyoffsetBottom
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.
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.
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
}
]
}
}
The flex
property of the component in the horizontal box corresponds to the flex
of CSS Flexbox as follows.
When
flex
=0
: CSS Flexboxflex: 0 0 auto;
equivalent layoutWhen
flex
=0
or more: CSS Flexboxflex: X 0 0;
equivalent layout (where X is the value offlex
)
# 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.
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
and3
, 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"
}
]
}
]
}
}
The flex
property of the component in the vertical box corresponds to the flex
of CSS Flexbox as follows.
When
flex
=0
: CSS Flexboxflex: 0 0 auto;
equivalent layoutWhen
flex
=0
or more: CSS Flexboxflex: X 0 auto;
equivalent layout (where X is the value offlex
)
# 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
.
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.
# Scaling to size according to the font size setting
If you set the scaling
property to true
of a Flex Message button, text, or icon, you can automatically scale the font size and icon size according to the font size setting of the LINE app. This allows you to send messages with accessibility in mind.
Example of font size Small | Example of font size Extra large |
---|---|
![]() | ![]() |
The JSON definition of this Flex Message example is as follows.
{
"type": "bubble",
"body": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "text",
"text": "hello, world",
"size": "30px"
},
{
"type": "text",
"text": "hello, world",
"margin": "10px",
"size": "30px",
"scaling": true
}
]
}
}
In a button and text, you can set the scaling
property to true
and the adjustMode
property to shrink-to-fit
. In this case, when the text width exceeds the component width due to the automatic scaling of the font size, the font size will be shrunk to fit the component width.
The following is an example of the Extra Large font size of the LINE app.
dummy | dummy |
---|---|
![]() |
|
# 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-alignedend
: Right-alignedcenter
: Center-aligned (default value)
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-alignedcenter
: Center-aligned
This property is ignored in a child element of a baseline box.
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.
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.
# 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 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).
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.
- 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"
}
}
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.
- 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.
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. |
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
.
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
propertyThe effect of the offset varies depending on the setting of the
position
property. You cannot specifyabsolute
in the box immediately below the block.offsetTop
property,offsetBottom
property,offsetStart
property, andoffsetEnd
propertyYou 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
, orxxl
.
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.
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. |
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. |
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.
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. |
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. |
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. |
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.
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.
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 (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)
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
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.
# Related pages
- Send Flex Messages
- Flex Message elements
- Flex Message (Messaging API reference)