Display: flex
Adding display: flex; to a parent element turns it into a flex container and places its direct children in a flexible layout.
WEEK 07 · HTML / CSS TUTORIAL
Making layouts easier with CSS Flexbox.
A beginner-friendly look at how Flexbox helps organize, align, and resize elements on a webpage.
Watch the tutorial01 / THE SOURCE
About the tutorial
For this assignment, I selected “Learn flexbox the easy way”, a YouTube tutorial presented by Kevin Powell. Kevin is a web design educator who focuses on CSS and front-end development. His videos break down web design techniques into understandable examples, making them useful for beginners.
The tutorial covers how Flexbox changes the way elements are arranged, how items grow or shrink, and how properties such as justify-content and align-items control their placement. These are useful skills for building websites that work on different screen sizes.
02 / WHAT IT TEACHES
What is CSS Flexbox?
Flexbox is a CSS layout system that arranges elements along a row or column. Instead of manually positioning each item, a developer can let the browser manage spacing, alignment, and flexible sizing.
Justify content
The justify-content property controls how items are distributed along the main axis, such as centering them or placing space between them.
Align items
The align-items property positions items along the cross axis. It can help center content vertically in a horizontal row.
Flexible sizing
Properties such as flex-grow and flex-shrink influence how elements expand or contract when available space changes.
A SIMPLE EXAMPLE
Three items, one flexible row.
The boxes below use Flexbox. Resize your browser window to see how the layout adjusts and wraps when space is limited.
HTML
CSS
FLEX
03 / WATCH & LEARN
Watch the video tutorial
Kevin Powell demonstrates Flexbox with practical examples, including columns, direction, spacing, and alignment. The embedded video below is the original tutorial.
If the embedded player is unavailable, watch the tutorial directly on YouTube.
04 / KEY TAKEAWAY
Why this matters in web design
One important idea from this tutorial is that good layouts do not need complicated positioning rules. Flexbox provides a simpler way to align navigation links, arrange cards, and create columns that adjust to available space. Understanding the main axis, cross axis, and flexible sizing makes CSS layouts easier to plan and maintain.
This page also demonstrates the concept: the navigation, feature cards, and colored example boxes all use Flexbox in the stylesheet.