Using Flexbox - Exercise

Flexbox containers and elements

When creating a Flexbox layout, our first job is to visually define it. You can use pen and paper, a diagramming tool like draw.io, or a more complex web design or UX (User Experience) tool like Figma. Alternatively, you may work with designers who will give you a ready-made plan.

Once the layout is complete, identify the Flexbox containers and inner elements by drawing rectangles.

Note that the Flexbox definition is recursive. A Flexbox child element can also be a Flexbox container of other elements. Example: