MainAxisAlignment

How the children should be placed along the main axis.

Inherits: Enum

Properties

• CENTER –

  Place the children as close to the middle of the main axis as possible.

• END –

  Place the children as close to the end of the main axis as possible.

• SPACE_AROUND –

  Place the free space evenly between the children as well as half of that space before and after the first and last child.

• SPACE_BETWEEN –

  Place the free space evenly between the children.

• SPACE_EVENLY –

  Place the free space evenly between the children as well as before and after the first and last child.

• START –

  Place the children as close to the start of the main axis as possible.

Examples

Showcase

import flet as ft


def dot(label: str) -> ft.Container:
    return ft.Container(
        width=36,
        height=36,
        border_radius=18,
        bgcolor=ft.Colors.PRIMARY_CONTAINER,
        alignment=ft.Alignment.CENTER,
        content=ft.Text(label, size=12, color=ft.Colors.ON_PRIMARY_CONTAINER),
    )


def showcase_card(alignment: ft.MainAxisAlignment) -> ft.Container:
    return ft.Container(
        width=320,
        padding=12,
        border=ft.Border.all(1, ft.Colors.RED),
        border_radius=10,
        bgcolor=ft.Colors.SURFACE_CONTAINER_LOW,
        content=ft.Column(
            spacing=8,
            controls=[
                ft.Text(alignment.name, weight=ft.FontWeight.BOLD),
                ft.Container(
                    width=250,
                    height=70,
                    padding=8,
                    border=ft.Border.all(1, ft.Colors.OUTLINE),
                    border_radius=8,
                    bgcolor=ft.Colors.SURFACE,
                    content=ft.Row(
                        alignment=alignment,
                        vertical_alignment=ft.CrossAxisAlignment.CENTER,
                        controls=[dot("1"), dot("2"), dot("3")],
                    ),
                ),
            ],
        ),
    )


def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.DARK
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    page.appbar = ft.AppBar(title="MainAxisAlignment Showcase")
    page.add(
        ft.Text("Compare horizontal distribution of children in a fixed-width row."),
        ft.Row(
            wrap=True,
            spacing=12,
            expand=True,
            scroll=ft.ScrollMode.AUTO,
            alignment=ft.MainAxisAlignment.CENTER,
            controls=[showcase_card(alignment) for alignment in ft.MainAxisAlignment],
        ),
    )


ft.run(main)

Properties

CENTER = 'center' class-attribute instance-attribute

Place the children as close to the middle of the main axis as possible.

END = 'end' class-attribute instance-attribute

Place the children as close to the end of the main axis as possible.

SPACE_AROUND = 'spaceAround' class-attribute instance-attribute

Place the free space evenly between the children as well as half of that space before and after the first and last child.

SPACE_BETWEEN = 'spaceBetween' class-attribute instance-attribute

Place the free space evenly between the children.

SPACE_EVENLY = 'spaceEvenly' class-attribute instance-attribute

Place the free space evenly between the children as well as before and after the first and last child.

START = 'start' class-attribute instance-attribute

Place the children as close to the start of the main axis as possible.