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:

Create a free account to view this lesson.

By signing up, you agree to Educative's Terms of Service and Privacy Policy