Skip to main content

​
Overview

Row is a layout control that displays its children in a horizontal array. Children are positioned from left to right in the order they appear in the controls list. To cause a child control to expand and fill the available horizontal space, set its expand property.

​
Basic Example

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Row(
            controls=[
                ft.Card(
                    shape=ft.ContinuousRectangleBorder(radius=10),
                    content=ft.Container(
                        padding=5,
                        border_radius=ft.BorderRadius.all(5),
                        bgcolor=ft.Colors.AMBER_100,
                        content=ft.Text(f"Control {i}"),
                    ),
                )
                for i in range(1, 6)
            ],
        )
    )

ft.app(main)

​
Class Definition

class Row(LayoutControl, ScrollableControl, AdaptiveControl):
    controls: list[Control] = field(default_factory=list)
    alignment: MainAxisAlignment = MainAxisAlignment.START
    vertical_alignment: CrossAxisAlignment = CrossAxisAlignment.CENTER
    spacing: Number = 10
    tight: bool = False
    wrap: bool = False
    run_spacing: Number = 10
    run_alignment: MainAxisAlignment = MainAxisAlignment.START
    intrinsic_height: bool = False

​
Properties

​
controls

​
controls
list[Control]
default:"[]"
A list of controls to display horizontally. Controls are arranged from left to right in the order they appear in the list.

​
alignment

​
alignment
MainAxisAlignment
default:"MainAxisAlignment.START"
Defines how the child controls should be placed horizontally along the main (horizontal) axis.Options:
  • MainAxisAlignment.START - Place children at the left
  • MainAxisAlignment.END - Place children at the right
  • MainAxisAlignment.CENTER - Place children in the middle
  • MainAxisAlignment.SPACE_BETWEEN - Place free space evenly between children
  • MainAxisAlignment.SPACE_AROUND - Place free space evenly between children and half of that space before and after
  • MainAxisAlignment.SPACE_EVENLY - Place free space evenly between children and before/after the first/last child

​
vertical_alignment

​
vertical_alignment
CrossAxisAlignment
default:"CrossAxisAlignment.CENTER"
Defines how the child controls should be placed vertically along the cross (vertical) axis.Options:
  • CrossAxisAlignment.START - Align children to the top
  • CrossAxisAlignment.END - Align children to the bottom
  • CrossAxisAlignment.CENTER - Center children vertically
  • CrossAxisAlignment.STRETCH - Stretch children to fill vertical space
  • CrossAxisAlignment.BASELINE - Align children by their text baseline
When wrap is True, this property doesn’t support CrossAxisAlignment.STRETCH or CrossAxisAlignment.BASELINE. If either is used, CrossAxisAlignment.CENTER will be applied instead.

​
spacing

​
spacing
Number
default:"10"
The spacing (in pixels) between the child controls.
This property only has effect when alignment is MainAxisAlignment.START, MainAxisAlignment.END, or MainAxisAlignment.CENTER.

​
tight

​
tight
bool
default:"False"
Whether this row should occupy all available horizontal space (True), or only as much as needed by its children controls (False).
This property only has effect when wrap is False.

​
wrap

​
wrap
bool
default:"False"
Whether this row should put child controls into additional rows (runs) if they don’t fit in a single row.When True, controls that exceed the available width will wrap vertically into additional rows.

​
run_spacing

​
run_spacing
Number
default:"10"
The spacing (in pixels) between runs when wrap is True.This controls the vertical spacing between rows when wrapping occurs.

​
run_alignment

​
run_alignment
MainAxisAlignment
default:"MainAxisAlignment.START"
How the runs should be placed in the cross-axis when wrap is True.This controls how multiple rows are aligned vertically when wrapping is enabled.

​
intrinsic_height

​
intrinsic_height
bool
default:"False"
Whether this row should be as tall as the tallest child control in controls.If False, the Row expands to fill the available height.

​
Layout Behavior

​
How Children Are Arranged

  1. Main Axis (Horizontal): Children are placed from left to right along the horizontal axis according to the alignment property.
  2. Cross Axis (Vertical): Children are aligned vertically according to the vertical_alignment property.
  3. Spacing: The spacing property adds horizontal gaps between children when using START, END, or CENTER alignment.
  4. Wrapping: When wrap is enabled, children that don’t fit horizontally will wrap into new rows below.

​
Expanding Children

Set the expand property on child controls to make them fill available horizontal space: 
ft.Row(
    controls=[
        ft.Container(content=ft.Text("Left"), bgcolor=ft.Colors.RED),
        ft.Container(content=ft.Text("Center"), bgcolor=ft.Colors.GREEN, expand=True),
        ft.Container(content=ft.Text("Right"), bgcolor=ft.Colors.BLUE),
    ],
)

​
Scrolling

Row inherits from ScrollableControl, which means it can be made scrollable: 
ft.Row(
    scroll=ft.ScrollMode.AUTO,
    controls=[
        ft.Container(width=100, height=100, bgcolor=ft.Colors.AMBER)
        for _ in range(20)
    ],
)

​
Examples

​
Centered Row with Spacing

ft.Row(
    alignment=ft.MainAxisAlignment.CENTER,
    vertical_alignment=ft.CrossAxisAlignment.CENTER,
    spacing=20,
    controls=[
        ft.Icon(ft.Icons.HOME),
        ft.Text("Home"),
        ft.Icon(ft.Icons.SETTINGS),
    ],
)

​
Stretched Children

ft.Row(
    vertical_alignment=ft.CrossAxisAlignment.STRETCH,
    spacing=10,
    controls=[
        ft.Container(width=50, bgcolor=ft.Colors.RED),
        ft.Container(width=50, bgcolor=ft.Colors.GREEN),
        ft.Container(width=50, bgcolor=ft.Colors.BLUE),
    ],
)

​
Wrapped Row

ft.Row(
    width=300,
    wrap=True,
    spacing=10,
    run_spacing=15,
    controls=[
        ft.ElevatedButton(f"Button {i}")
        for i in range(12)
    ],
)

​
Space Between Alignment

ft.Row(
    width=400,
    alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
    controls=[
        ft.Text("Left"),
        ft.Text("Center"),
        ft.Text("Right"),
    ],
)

​
Mixed Expand Values

ft.Row(
    controls=[
        ft.Container(content=ft.Text("1"), bgcolor=ft.Colors.RED, expand=1),
        ft.Container(content=ft.Text("2"), bgcolor=ft.Colors.GREEN, expand=2),
        ft.Container(content=ft.Text("3"), bgcolor=ft.Colors.BLUE, expand=1),
    ],
)

Build docs developers (and LLMs) love

Get started for freeTalk to us