Skip to content

💡 Per-child align-self #70

@natemoo-re

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
    No fields configured for issues without a type.

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions