Skip to content

💡 Per-child align-self #70

Description

@natemoo-re

Is your feature request related to a problem?

A container's cross-axis alignment (alignX / alignY) applies to all its children at once—there's no way for a single child to align differently. In a top-to-bottom column that left-aligns its children, you can't right-align just one of them. The single-child workaround of promoting a child's alignment onto the parent breaks the moment two children need divergent alignment.

Describe the solution you'd like

A per-child alignSelf on layout that overrides the parent's cross-axis alignment for that one element:

open("b", {
  layout: {
    width: fit(),
    alignSelf: "flex-end", // override just this child to the cross-axis end
  },
});

alignSelf should mirror the CSS align-self property, and its values should use the string-literal form from the alignment refactor in #42 (re: #3). Children without alignSelf keep following the parent's alignment. The "stretch" value (fill the cross axis) is the alignment-side equivalent of the stretch() sizing axis in #71.

Describe alternatives you've considered

Wrapping the odd-one-out child in its own intermediate container with a different alignX works for one case but bloats the tree and doesn't compose—every divergently-aligned child needs its own wrapper.

Additional context

Failing test case on nm/repro/align-self (test · diff).

Clay exposes only container-level childAlignment; per-child alignSelf needs a field on the element's layout (ops.ts), decoded in reduce (src/clayterm.c:499), and applied as a cross-axis override in the layout pass.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions