7.2 Wrap (flex-wrap)

This topic provides information on Wrap (flex-wrap).

CSS Equivalent:

  • flex-wrap: wrap; – Items wrap to the next line
  • flex-wrap: nowrap; – Items stay on a single line (default)

Figma Concept:

Figma allows similar behaviour using the “Wrap” toggle in Auto Layout.

How to Set in Figma:

  1. Select the Auto Layout frame
  2. Enable the Wrap toggle in the Auto Layout panel
  3. Items will wrap to the next line when space runs out

Figure 7-3 Wrap (flex-wrap)


Description of Figure 7-3 follows
Description of "Figure 7-3 Wrap (flex-wrap)"

Parent topic: Auto Layout to Flexbox Mapping