Skip to content

Alignment

Defines an alignment relative to the center.

overview

Properties

  • x(Number) –

    Represents the horizontal distance from the center.

  • y(Number) –

    Represents the vertical distance from the center.

  • BOTTOM_CENTER(AlignmentProperty) –

    Represents the bottom center and is equivalent to Alignment(0.0, 1.0).

  • BOTTOM_LEFT(AlignmentProperty) –

    Represents the bottom left corner and is equivalent to Alignment(-1.0, 1.0).

  • BOTTOM_RIGHT(AlignmentProperty) –

    Represents the bottom right corner and is equivalent to Alignment(1.0, 1.0).

  • CENTER(AlignmentProperty) –

    Represents the center and is equivalent to Alignment(0.0, 0.0).

  • CENTER_LEFT(AlignmentProperty) –

    Represents the center left and is equivalent to Alignment(-1.0, 0.0).

  • CENTER_RIGHT(AlignmentProperty) –

    Represents the center right and is equivalent to Alignment(1.0, 0.0).

  • TOP_CENTER(AlignmentProperty) –

    Represents the top center and is equivalent to Alignment(0.0, -1.0).

  • TOP_LEFT(AlignmentProperty) –

    Represents the top left corner and is equivalent to Alignment(-1.0, -1.0).

  • TOP_RIGHT(AlignmentProperty) –

    Represents the top right corner and is equivalent to Alignment(1.0, -1.0).

Methods

  • copy –

    Returns a copy of this object with the specified properties overridden.

Properties#

x #

x: Number

Represents the horizontal distance from the center.

It's value ranges between -1.0 and 1.0 inclusive.

y #

y: Number

Represents the vertical distance from the center.

It's value ranges between -1.0 and 1.0 inclusive.

BOTTOM_CENTER #

BOTTOM_CENTER: AlignmentProperty

Represents the bottom center and is equivalent to Alignment(0.0, 1.0).

BOTTOM_LEFT #

BOTTOM_LEFT: AlignmentProperty

Represents the bottom left corner and is equivalent to Alignment(-1.0, 1.0).

BOTTOM_RIGHT #

BOTTOM_RIGHT: AlignmentProperty

Represents the bottom right corner and is equivalent to Alignment(1.0, 1.0).

CENTER #

CENTER: AlignmentProperty

Represents the center and is equivalent to Alignment(0.0, 0.0).

CENTER_LEFT #

CENTER_LEFT: AlignmentProperty

Represents the center left and is equivalent to Alignment(-1.0, 0.0).

CENTER_RIGHT #

CENTER_RIGHT: AlignmentProperty

Represents the center right and is equivalent to Alignment(1.0, 0.0).

TOP_CENTER #

TOP_CENTER: AlignmentProperty

Represents the top center and is equivalent to Alignment(0.0, -1.0).

TOP_LEFT #

TOP_LEFT: AlignmentProperty

Represents the top left corner and is equivalent to Alignment(-1.0, -1.0).

TOP_RIGHT #

TOP_RIGHT: AlignmentProperty

Represents the top right corner and is equivalent to Alignment(1.0, -1.0).

Methods#

copy #

copy(
    *, x: Number | None = None, y: Number | None = None
) -> Alignment

Returns a copy of this object with the specified properties overridden.

Examples#

Example 1#

import flet as ft


def main(page: ft.Page):
    page.title = "Containers with different alignments"

    page.add(
        ft.Row(
            controls=[
                ft.Container(
                    content=ft.Button("Center"),
                    bgcolor=ft.Colors.AMBER,
                    padding=15,
                    alignment=ft.Alignment.CENTER,
                    width=150,
                    height=150,
                ),
                ft.Container(
                    content=ft.Button("Top left"),
                    bgcolor=ft.Colors.AMBER,
                    padding=15,
                    alignment=ft.Alignment.TOP_LEFT,
                    width=150,
                    height=150,
                ),
                ft.Container(
                    content=ft.Button("-0.5, -0.5"),
                    bgcolor=ft.Colors.AMBER,
                    padding=15,
                    alignment=ft.alignment.Alignment(-0.5, -0.5),
                    width=150,
                    height=150,
                ),
            ]
        )
    )


ft.run(main)

container