Lenra Docs
Register on Lenra
  • Home
  • Getting started
    Open/Close
  • Guides
    Open/Close
  • Features
    Open/Close
  • References
    Open/Close
  • Contribute

    Flex

    The Flex component is a container that displays its children in a row or column.

    Examples

    Simple flex

    The flex component lays its children horizontally by default.

    {
        "type": "flex",
        "children": [
            {"type": "text", "value": "First child"},
            {"type": "text", "value": "Second child"}
        ]
    }
    

    Vertical flex

    {
        "type": "flex",
        "direction": "vertical",
        "children": [
            {"type": "text", "value": "First child"},
            {"type": "text", "value": "Second child"}
        ]
    }
    

    Flex children alignment

    The children of the flex can be aligned along and across its direction, the properties for that are respectively called mainAxisAlignment and crossAxisAlignment.

    {
        "type": "flex",
        "mainAxisAlignment": "center",
        "crossAxisAlignment": "center",
        "children": [
            {"type": "text", "value": "First child"},
            {"type": "text", "value": "Second child"}
        ]
    }
    

    Spacing children of flex & padding

    The children of the flex component can be spaced out by using the spacing property.

    A padding can also be added to the flex. For example if the flex is at the root of your application, you might want to add some padding to not be too close to the screen border.

    {
        "type": "flex",
        "spacing": 2,
        "padding": {
            "top": 10,
            "left": 10,
            "right": 10,
            "bottom": 10,
        },
        "children": [
            {"type": "text", "value": "First child"},
            {"type": "text", "value": "Second child"}
        ]
    }
    

    Fill parent of flex

    The flex can be set to fill its parent in the main axis.

    {
        "type": "flex",
        "fillParent": true,
        "children": [
            {"type": "text", "value": "First child"},
            {"type": "text", "value": "Second child"}
        ]
    }
    

    Flex scroll

    Sometimes a flex can have a lot of children, this can cause the content to get out of the screen. To make sure that all of the content is readable, use the scroll property.

    {
        "type": "flex",
        "scroll": true,
        "children": [
            {"type": "text", "value": "First child"},
            {"type": "text", "value": "Second child"},
            {"type": "text", "value": "Third child that has a text length that causes it to go out of the screen"}
        ]
    }
    

    Properties

    AttributeDescriptionType
    _typeThe identifier of the component
    • flex
    childrenThe childrenarray
    crossAxisAlignmentThe alignment along the cross axisstring
    • start
    • end
    • center
    • stretch
    • baseline
    directionThe direction of the component (horizontal/vertical)string
    • horizontal
    • vertical
    fillParentif true the flex will fill the main axis. Otherwise it will take the children size.boolean
    horizontalDirectionIn which direction the elements should be placed following the horizontal axis.string
    • ltr
    • rtl
    mainAxisAlignmentThe alignment along the main axisstring
    • start
    • end
    • center
    • spaceBetween
    • spaceAround
    • spaceEvenly
    paddingElement of type PaddingPadding
    scrollIf true the flex will scroll if there is too many item in the Main Axis.boolean
    spacingThe multiplier of the base size for the minimal spacingnumber
    textBaselineA horizontal line used for aligning text.string
    • alphabetic
    • ideographic
    verticalDirectionHow the objects should be aligned following the vertical axis.string
    • down
    • up