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

Attribute	Description	Type
_type	The identifier of the component	flex
children	The children	array
crossAxisAlignment	The alignment along the cross axis	string start end center stretch baseline
direction	The direction of the component (horizontal/vertical)	string horizontal vertical
fillParent	if true the flex will fill the main axis. Otherwise it will take the children size.	boolean
horizontalDirection	In which direction the elements should be placed following the horizontal axis.	string ltr rtl
mainAxisAlignment	The alignment along the main axis	string start end center spaceBetween spaceAround spaceEvenly
padding	Element of type Padding	Padding
scroll	If true the flex will scroll if there is too many item in the Main Axis.	boolean
spacing	The multiplier of the base size for the minimal spacing	number
textBaseline	A horizontal line used for aligning text.	string alphabetic ideographic
verticalDirection	How the objects should be aligned following the vertical axis.	string down up