CrossAxisAlignment

Inherits: Enum

How the children should be placed along the cross axis

Properties

• BASELINE –

  Place the children along the cross axis such that their baselines match.

• CENTER –

  Place the children so that their centers align with the middle of the cross axis.

• END –

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

• START –

  Place the children with their start edge aligned with the start side of the cross

• STRETCH –

  Require the children to fill the cross axis.

Properties

BASELINE = 'baseline' class-attribute instance-attribute

Place the children along the cross axis such that their baselines match.

CENTER = 'center' class-attribute instance-attribute

Place the children so that their centers align with the middle of the cross axis.

END = 'end' class-attribute instance-attribute

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

START = 'start' class-attribute instance-attribute

Place the children with their start edge aligned with the start side of the cross axis.

STRETCH = 'stretch' class-attribute instance-attribute

Require the children to fill the cross axis.

Usage example

import flet as ft

def main(page: ft.Page):
    def items(count):
        items = []
        for i in range(1, count + 1):
            items.append(
                ft.Container(
                    content=ft.Text(value=str(i)),
                    alignment=ft.alignment.center,
                    width=50,
                    height=50,
                    bgcolor=ft.Colors.AMBER_500,
                )
            )
        return items

    def column_with_horiz_alignment(align: ft.CrossAxisAlignment):
        return ft.Column(
            [
                ft.Text(str(align), size=16),
                ft.Container(
                    content=ft.Column(
                        items(3),
                        alignment=ft.MainAxisAlignment.START,
                        horizontal_alignment=align,
                    ),
                    bgcolor=ft.Colors.AMBER_100,
                    width=100,
                ),
            ]
        )

    page.add(
        ft.Row(
            [
                column_with_horiz_alignment(ft.CrossAxisAlignment.START),
                column_with_horiz_alignment(ft.CrossAxisAlignment.CENTER),
                column_with_horiz_alignment(ft.CrossAxisAlignment.END),
            ],
            spacing=30,
            alignment=ft.MainAxisAlignment.START,
        )
    )

ft.run(main)