How would you configure a wrapping filter tag container and its properties?

WHAT THIS TESTS: This question checks whether you know that horizontal auto layout has a wrap option that pushes overflowing objects to the next line, and whether you can distinguish that behavior from grid flow. It also checks if you understand how container properties like direction, spacing, padding, alignment, and resizing interact with child elements so the layout adjusts automatically when tag content changes.

A GOOD ANSWER COVERS: A good answer hits four things in order. First, select the parent frame and apply auto layout, then choose the horizontal flow so objects arrange along the x-axis. Second, enable wrap because that pushes overflowing objects to the next line instead of keeping them in a single row. Third, configure the container properties: set spacing between items, set padding around the frame, choose alignment, and set resizing behavior so the container responds to the overall tag list. Fourth, configure each individual tag component for resizing so that when the text label grows or shrinks the tag adjusts and the parent wrap recalculates.

COMMON WRONG ANSWERS: The biggest red flag is confusing wrap with grid. Grid places objects in columns and rows and does not wrap to the next line; instead objects sit in a grid and can span multiple rows or columns. Another red flag is suggesting manual line breaks or separate rows, which defeats the purpose of auto layout adjusting dynamically when content changes or elements are added, removed, or resized.

LIKELY FOLLOW-UPS: An interviewer might ask what happens when a tag label gets very long, or how the container behaves if you switch from horizontal with wrap to grid. They might also ask how alignment and spacing affect wrapped rows differently than a single row, or how resizing rules on the container change when the tag list grows.

ONE CONCRETE EXAMPLE: Imagine a filter bar with eight tag components inside a parent frame. You set the parent to horizontal auto layout and turn on wrap. You set horizontal spacing to eight pixels and vertical spacing to twelve pixels so wrapped rows have breathable gaps. You add sixteen pixels of padding on all sides. Each tag component uses auto layout internally with resizing set so the button grows or shrinks as you edit the text label. When you add a ninth tag that no longer fits the frame width, wrap pushes it to the next line and the container height adjusts without manual repositioning.