How to Place Components and Adjust Child Components

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

    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 Flexible Template in the API reference.

    • Direction of Placing Components
      • Available components
      • Characteristics of the baseline box
    • Width and Height of Components
      • Width of components in a horizontal box
      • Height of components in a vertical box
      • Width of a box
      • Height of a box
      • Size of other components
    • Placement of Components
      • Alignment in horizontal direction
      • Alignment in vertical direction
      • Box padding
      • spacing property of the box
      • margin property of components
      • Offset
    • About the Order of Drawing

    Direction of Placing Components

    You can decide the direction of placing child elements by deciding the direction of the main axis of the box. There are three layout types for placing child elements in a box.

    The direction of placing child elements is specified by the layout property of the box.

    Layout types
    (Value of the layout property)
    Description
    horizontal The child elements are placed horizontally. The direction of placing the child elements is specified by the direction property of the bubble.

    A box with this layout type is called a horizontal box.
    vertical The child elements are placed vertically from top to bottom.

    A box with this layout type is called a vertical box.
    baseline The child elements are placed in the same way as in a horizontal box. For details on differences from a horizontal box, see Characteristics of the baseline box.

    A box with this layout type is called a baseline box.

    Available components

    The components that can be used as child elements differ depending on the type of the box.

    Horizontal box Vertical box Baseline box
    Box O O X
    Button O O X
    Image O O X
    Icon X X O
    Text O O O
    Span (can be used as a child element of text) X X X
    Separator O O X
    Filler O O O
    Spacer (not recommended) O O O

    Characteristics of the baseline box

    A baseline box behaves in the same way as a horizontal box. However, its behavior is different from a horizontal box in terms of the following points.

    Alignment in vertical direction

    Alignment in the vertical direction is fixed at the baseline of the text. Texts with different font sizes are aligned at the baseline.

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

    Unavailable properties

    The following properties are unavailable in a baseline box:

    • gravity property
    • offsetBottom property (to be made available in future)

    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 Template above can be created by the JSON data below.

    
    {
      "type": "bubble",
      "body": {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "text",
            "text": "The work site begins to move; the work site is coming in sight; the work is going on. Expand business communications with us!",
            "wrap": true,
            "color": "#ff0000",
            "flex": 2
          },
          {
            "type": "text",
            "text": "The work site begins to move; the work site is coming in sight; the work is going on. Expand business communications with us!",
            "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 Template 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": "The work site begins to move; the work site is coming in sight; the work is going on. Expand business communications with us!",
            "wrap": true,
            "color": "#ff0000",
            "flex": 2
          },
          {
            "type": "text",
            "text": "The work site begins to move; the work site is coming in sight; the work is going on. Expand business communications with us!",
            "wrap": true,
            "color": "#0000ff",
            "flex": 3
          }
        ]
      }
    }
    

    About the correspondence with the flex of the 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 = more than 0: 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.

    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 texts (one row each) and three separators alone.
    • The free space is divided at a ratio of two to three on the basis of the flex property's value (2 and 3) of the two text, and is assigned to each component.

    The Flex Template 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"
              }
            ]
          }
        ]
      }
    }
    

    About the correspondence with the flex of the 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 = more than 0: CSS Flexbox flex: X 0 auto; equivalent layout (where X is the value of flex)

    Width of a box

    The width of a box can be specified by the width property. You can specify in % (the percentage with reference to the width of the parent element) or in pixels.

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

    When the width property is specified 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.

    Height of a box

    The height of a box can be specified by the height property. You can specify in % (the percentage with reference to the height of the parent element) or in pixels.

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

    Size of other components

    In components such as buttons and images, the size can be specified by a property different from the flex property. For more information about the JSON schema, see Flexible Template in the API reference.

    Placement of Components

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

    Alignment in horizontal direction

    The alignment style in the horizontal direction (cross-axis direction) of a vertical box can be specified by the align property. Specify one of the following values:

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

    The Flex Template 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

    The alignment style in the vertical direction (cross-axis direction) of a horizontal box can be specified by the gravity property. Specify one of the following values:

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

    Note

    The Flex Template 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": "text",
            "text": "center",
            "gravity": "center"
          },
          {
            "type": "text",
            "text": "bottom",
            "gravity": "bottom"
          }
        ]
      }
    }
    

    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 Template 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 Template above, the layout will become as shown below.

    spacing property of the box

    The spacing property of the box (parent element) containing the component determines the minimum space between components. You can specify one of the following values: none, xs, sm, md, lg, xl, or xxl. none does not set a space while the other values set a space whose size increases in the order of listing.

    In the Flex Template below, three vertical boxes are placed at equal intervals (md) in the horizontal box.

    The Flex Template 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 margin property determines the minimum space from the previous component. You can specify one of the following values: none, xs, sm, md, lg, xl, or xxl. none does not set a space while the other values set a space whose size increases in the order of listing.

    Note

    • The margin property takes precedence over the spacing property of the parent box. The margin property of the component inserted at the top of the box is not reflected in the layout.

    In the Flex Template 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 Template 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, in order to explain the effect of an offset, the setting of the horizontal box displayed as "TARGET" is changed with reference to the Flex Template below.

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

    
    {
      "type": "bubble",
      "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 of CSS Positioned Layout Module Level 3.

    Property Description
    offsetBottom Specifies the amount moved to the bottom from the regular position
    offsetStart Specifies the amount moved to the left from the regular position
    offsetEnd Specifies the amount moved to the right from the regular position
    offsetTop Specifies the amount moved to the top from the regular position

    Here, an example in which the setting of the horizontal box displayed as "TARGET" is changed as below will be introduced.

    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.

    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 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 Specifies the relative position from the left end of the parent element to the left end of the component.
    offsetEnd Specifies the relative position from the right end of the parent element to the right 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.

    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").

    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.