Up to this point in the module you have been styling individual elements — choosing fonts and colors, writing selectors, and adjusting padding, borders, and margins. CSS layout is the next step: deciding where elements sit on the page and how they relate to one another. Every HTML element starts out following the normal document flow, where block-level elements stack vertically and inline elements sit side by side within a line. Layout techniques are the tools you use to change that default behavior deliberately.
This topic focuses on two of the most practical tools for that job. Flexbox is a one-dimensional layout model that lets a container distribute, align, and space its children along a row or a column, and it is the standard way to build navigation bars, card rows, and side-by-side content sections. CSS positioning — static, relative, absolute, fixed, and sticky — lets you take an element partly or fully out of normal flow to pin it in a specific place, such as a sticky header or a badge layered over an image. Together these give you enough control to assemble a multi-section page layout without hacks.
As you watch the videos below, pay attention to the distinction between properties you set on the container (display, flex-direction, justify-content, align-items) and properties you set on individual children (flex-grow, flex-shrink, flex-basis, align-self, and the offset properties top, right, bottom, left). Also notice what each positioning value is measured against — that is the most common source of confusion. Try reproducing the examples in your own stylesheet rather than only watching; layout is much easier to understand when you can change a value and see what moves.
This Webflow tutorial surveys the main values of the CSS display property, including block, flex, grid, inline-flex, inline-grid, and none, and explains how each one changes the way an element and its children are laid out. Based on its title and description, it is an overview video that compares layout modes rather than drilling deeply into any one of them. Expect visual demonstrations of how switching a container's display value rearranges the elements inside it.
It is a good starting point for the Understanding CSS Layout Flow subtopic because it frames Flexbox as one option among several display modes, which helps you see why and when you would reach for it. Webflow produces design-focused instructional content, so the explanations are presented visually, which suits a layout topic.
A focused, roughly twelve-minute walkthrough of Flexbox, with timestamps indicating it begins at display: flex and continues through the core flex properties. It should cover setting up a flex container and then working through direction, alignment, justification, and the properties applied to individual flex items. The short runtime means it moves quickly and concentrates on the properties you will use most often.
This video maps directly onto three of our subtopics — Introducing Flexbox, Aligning and Justifying Flex Items, and Controlling Individual Flex Items — in a single compact lesson. The chapter timestamps also make it easy to return to a specific property while you are working on your own layout.
A brief explanation of the five values of the CSS position property: static, relative, absolute, fixed, and sticky. In just over three minutes it should define each value, show what each one is positioned relative to, and demonstrate how the top, right, bottom, and left offsets behave in each case. It is a basics-level video intended as a quick conceptual reference.
It covers the CSS Positioning subtopic directly and concisely, which is useful because positioning is a small set of rules that mainly needs to be understood rather than practiced at length. Its short length makes it easy to rewatch when you are deciding whether an element needs relative, absolute, or sticky positioning in your page layout.
These three videos together support MO4, the outcome that asks you to arrange page elements into multi-section layouts using Flexbox alignment properties and CSS positioning. The Webflow overview establishes how display values govern layout flow so you can choose the right approach for a given section; the Flexbox tutorial supplies the container and item properties you will use to align and distribute content; and the positioning video covers the static, relative, absolute, fixed, and sticky behaviors needed to place elements outside normal flow. Because layout rules are written alongside your typography, color, and box model rules, practicing these techniques also feeds into MO5, where you integrate everything into one organized external stylesheet.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.