Alignment helpers for positioning inside layout parents.

Basics

Alignment happens inside the parent's content area. Padding and border are applied before alignment, so these helpers work within the remaining space.

Alignment is visible when the parent has extra space on that axis.

Alignment helpers position the element they are attached to inside its parent. el is the main exception: child content inherits alignment from the el.

el

In el, child content inherits alignment from the container.

Putting center_x/0, align_right/0, center_y/0, or align_bottom/0 on the el controls how its child content is positioned inside that el.

This example centers a pill inside a larger container:

el(
  [
    width(px(320)),
    height(px(160)),
    padding(16),
    Background.color(color(:slate, 900)),
    Border.rounded(12),
    center_x(),
    center_y()
  ],
  el(
    [
      padding_xy(12, 8),
      Background.color(color(:slate, 50)),
      Border.rounded(999),
      Border.width(1),
      Border.color(color(:slate, 300)),
      Font.color(color(:slate, 800))
    ],
    text("Centered child")
  )
)

A child can override inherited alignment with its own alignment helper:

el(
  [width(px(200)), height(px(100)), center_x()],
  el([align_right()], text("Child"))
)

row

In row, children do not inherit alignment from the row. Put alignment helpers on the children you want to position inside the row.

align_left/0, center_x/0, and align_right/0 split children into left, center, and right groups across the row.

align_top/0, center_y/0, and align_bottom/0 position each child within the row height.

If you put an alignment helper on the row itself, it positions that row inside its parent. It is not inherited by the row's children.

This row shows left, center, and right grouping across the main axis.

row(
  [
    width(px(360)),
    height(px(88)),
    padding(12),
    Background.color(color(:slate, 900)),
    Border.rounded(12)
  ],
  [
    el(
      [
        align_left(),
        center_y(),
        padding_xy(10, 6),
        Background.color(color(:slate, 50)),
        Border.rounded(999),
        Border.width(1),
        Border.color(color(:slate, 300)),
        Font.color(color(:slate, 800))
      ],
      text("Left")
    ),
    el(
      [
        center_x(),
        center_y(),
        padding_xy(10, 6),
        Background.color(color(:slate, 50)),
        Border.rounded(999),
        Border.width(1),
        Border.color(color(:slate, 300)),
        Font.color(color(:slate, 800))
      ],
      text("Center")
    ),
    el(
      [
        align_right(),
        center_y(),
        padding_xy(10, 6),
        Background.color(color(:slate, 50)),
        Border.rounded(999),
        Border.width(1),
        Border.color(color(:slate, 300)),
        Font.color(color(:slate, 800))
      ],
      text("Right")
    )
  ]
)

wrapped_row

In wrapped_row, horizontal alignment is evaluated per wrapped line.

After wrapping, align_left/0, center_x/0, and align_right/0 split each line into left, center, and right zones using the remaining width of that line. A centered or right-aligned child on a later line therefore aligns within that line, not against the full wrapped row width.

align_top/0, center_y/0, and align_bottom/0 still position each child within the height of its own wrapped line.

column

In column, children do not inherit alignment from the column. Put alignment helpers on the children you want to position inside the column.

align_top/0, center_y/0, and align_bottom/0 split children into top, center, and bottom groups down the column.

align_left/0, center_x/0, and align_right/0 position each child within the column width.

If you put an alignment helper on the column itself, it positions that column inside its parent. It is not inherited by the column's children.

This column shows top, center, and bottom grouping down the main axis.

column(
  [
    width(px(220)),
    height(px(240)),
    padding(12),
    Background.color(color(:slate, 900)),
    Border.rounded(12)
  ],
  [
    el(
      [
        align_top(),
        center_x(),
        padding_xy(10, 6),
        Background.color(color(:slate, 50)),
        Border.rounded(999),
        Border.width(1),
        Border.color(color(:slate, 300)),
        Font.color(color(:slate, 800))
      ],
      text("Top")
    ),
    el(
      [
        center_y(),
        center_x(),
        padding_xy(10, 6),
        Background.color(color(:slate, 50)),
        Border.rounded(999),
        Border.width(1),
        Border.color(color(:slate, 300)),
        Font.color(color(:slate, 800))
      ],
      text("Middle")
    ),
    el(
      [
        align_bottom(),
        center_x(),
        padding_xy(10, 6),
        Background.color(color(:slate, 50)),
        Border.rounded(999),
        Border.width(1),
        Border.color(color(:slate, 300)),
        Font.color(color(:slate, 800))
      ],
      text("Bottom")
    )
  ]
)

In scrollable columns, align_bottom/0 stays part of the column's content flow instead of pinning to the visible bottom edge.