CSS Flexbox to Figma Auto Layout: A Property by Property Map

When flexbox and auto layout speak the same language

Figma's auto layout isn't a separate design idea sitting next to CSS flexbox. It's Figma's own implementation of the same main axis and cross axis model: a container flows its children in one direction, distributes leftover space along that axis, and aligns them on the other. If you already know justify-content and align-items, most of auto layout's property panel is a relabeling exercise, not a new skill to learn. This reference walks through the mapping property by property: direction and wrap, alignment on both axes, gap and spacing, sizing with fill and hug, and the handful of places where auto layout deliberately stops short of full flexbox.

Direction and wrap: flex-direction to Figma's flow

CSS sets the main axis with flex-direction: row or flex-direction: column. Figma exposes the same choice as a flow setting on the auto layout frame: Horizontal for row, Vertical for column. There's also a third option, Grid, which places children in columns and rows and has no single flexbox equivalent. It borrows more from CSS grid.

Wrapping is where the two diverge in scope. CSS flex-wrap: wrap lets items break onto new flex lines, each line becoming its own mini main axis, with align-content controlling how the lines themselves distribute on the cross axis. Figma's Wrap toggle, available on a Horizontal auto layout frame, gives you the visual result, items break to a new row when they run out of space, without exposing the full line distribution model behind it. For most component and card-grid work that's enough. For a layout that leans hard on flex-wrap plus align-content: space-between, expect to check the result by hand after an import.

Alignment on both axes: justify-content and align-items

justify-content distributes leftover space on the main axis: flex-start, center, flex-end, or one of the distributed values, space-between, space-around, space-evenly. Figma's frame-level alignment control offers the same start, center, end choices, plus the distributed modes live inside the Gap setting rather than a separate property. More on that below. One detail carries over exactly: justify-content has no visible effect once any child has flex-grow greater than 0, because that child consumes all the leftover space before alignment ever runs. Set an auto layout child to Fill container in Figma and you'll see the same thing: the frame's alignment setting on that axis stops doing anything visible, for the identical reason.

align-items sets cross-axis alignment for every child as a group: flex-start, center, flex-end, or stretch. Figma's alignment grid in the properties panel maps to this directly. Where the two part ways is align-self, the CSS property that overrides align-items for one child only. Auto layout has no per-child cross-axis override as of 2026. Need one item pinned to the top of a row while its siblings center? That's either a manual position outside the auto layout flow, or a nested frame, not a one-property toggle.

Gap and spacing: gap, column-gap, row-gap

CSS gap (with column-gap and row-gap as its longhand pair) sets fixed space between adjacent flex items. row-gap only has a visible effect once flex-wrap: wrap is set and items span more than one line; a single-line flex row only uses column-gap. Figma's Gap value works the same way relative to its own Wrap toggle: on a non-wrapping frame there's one gap value along the main axis, and turning Wrap on introduces a second value for the cross axis.

Figma also folds CSS's distributed justify-content values into Gap through an Auto spacing mode: Between, Around, and Evenly correspond to space-between, space-around, and space-evenly. A 2026 update to auto layout brought the edge cases closer to flexbox behavior specifically here. Auto gap now never goes below 0, matching how a real flex container collapses overflowing space-between items to the start of the row instead of letting them overlap. A single child in a Between auto-gap stack now aligns to the start edge rather than centering, again matching flexbox. The same update fixed padding on Fill container children to follow the CSS border-box model, so padding is always fully respected instead of being squeezed by a tight fit.

Sizing: flex-grow, flex-shrink, flex-basis to Fill container and Hug contents

flex-grow tells an item how much of the leftover main-axis space to claim, proportional to its grow factor. The CSS default of 0 means it won't grow past its flex-basis. Figma's Fill container resizing option is the design-tool equivalent: a child set to Fill container stretches to occupy whatever space is left in its parent auto layout frame, while still respecting the frame's padding and gap, the same role flex-grow plays in a flex container.

flex-shrink handles the opposite problem: removing space so items don't overflow a container that's too small for their combined size. Figma doesn't expose a proportional shrink factor. Instead a frame or object set to Fixed size holds its size regardless of available space, and Hug contents sizes an object to fit its children exactly. That's the equivalent of flex-basis: auto on an item with flex-grow: 0, the default content-based sizing every flex item starts from before grow or shrink is applied.

One constraint carries over from flexbox's own logic: a Figma frame can't be set to stretch and hug on the same axis at the same time, the same way a flex item can't simultaneously grow to fill space and shrink to fit its content on that axis. Pick one sizing behavior per axis, in CSS or in Figma.

What auto layout deliberately leaves out of flexbox

Figma's own team has described auto layout as a thoughtful subset of flexbox, not a full reimplementation. It covers direction, gap, padding, alignment, and fill or hug resizing, the properties that carry most of the weight in everyday interface layout. What it leaves out is mostly the parts of flexbox that exist to handle multi-line wrapping and per-item overrides: no align-self, and Wrap is a simpler frame-level toggle rather than the full flex-line distribution model behind flex-wrap plus align-content.

None of that makes auto layout wrong for the job. It makes it a deliberately smaller vocabulary aimed at what a designer actually touches day to day. The missing pieces are the ones a developer would reach for only in edge cases.

Where this leaves a property by property import

Direction, alignment, gap, and fill or hug resizing cover the large majority of a typical flexbox layout, and they map onto auto layout cleanly enough that the translation is mostly a rename. The places to check by hand after any CSS-to-Figma import are the ones this reference calls out directly: a per-child align-self override, and a flex-wrap layout that depends on align-content distributing multiple lines in a specific way. Everything else, direction, justify-content, align-items, gap, flex-grow, and flex-shrink, has a clear one-to-one home in the auto layout panel.

UnHTML reads a page's own flexbox CSS and sets the matching auto layout properties automatically during import, falling back to absolute position only where a layout genuinely has no auto layout equivalent, such as the align-self case above. The import report lists every fallback, so nothing is silently approximated.