7.3 Align Items (align-items)
This topic provides information on Align Items (align-items).
Controls alignment along the cross axis
CSS Equivalent:
align-items: flex-start | center | flex-end | stretch;
Figma Concept:
Aligns children perpendicular to the Auto Layout direction.
How to Set in Figma:
- Select the Auto Layout frame
- Use the Alignment Grid (3x3 dot grid) in the design panel
- Mapping:
- For Horizontal (→) direction:
- Top → flex-start
- Center → center
- Bottom → flex-end
- For Vertical (↓) direction:
- Left → flex-start
- Center → center
- Right → flex-end
- For Horizontal (→) direction:
Note:
Stretch behaviour – If children are set to Fill container, the behave like align-items: stretchParent topic: Auto Layout to Flexbox Mapping
