Using Flexbox - Exercise
In this lesson, we will get introduced to how Flexbox layouts are defined via an example and construct a basic Flexbox layout using HTML and CSS.
We'll cover the following...
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:
In this layout, we have a dark blue Flexbox container ...