This topic provides information on Flex Sizing (Child Behavior).

CSS Equivalent:

flex: initial, flex: 1, align-self, width, height

Figma Concept:

Set via the Resizing settings on child elements inside an Auto Layout frame.

1. Hug Contents → flex: initial

CSS Equivalent:

flex: 0 1 auto – No grow, size to content

How to Set in Figma:

1. Select the child element
2. Identify parent’s main axis:
   1. Horizontal (→) = Main Axis: Horizontal
   2. Vertical (↓) = Main Axis: Vertical
3. Set the child’s resizing for main axis to Hug Contents

Fill Container → flex: 1 (Grow)

CSS Equivalent:

flex: 1 1 0% or width: 100% depending on axis

2. How to Set in Figma:

1. Main Axis Grow (e.g., make item fill remaining space):
   • Set resizing to Fill Container along the main axis
2. Cross Axis Stretch (e.g., full width/height):
   1. Set resizing to Fill Container along the cross axis
   2. Requires parent’s align-items to allow stretching

Result:

The child fills available space. Perfect for flexible layouts and shared columns.