Navigation
Move beyond simple vertical stacks and learn how to align items horizontally and vertically using Flexbox.
Ever wonder how websites look perfect on both a giant TV and a tiny phone? It's not magic—it's a flexible layout system that acts like a 'smart container' for your content.
Before Flexbox, moving a box to the center of a page was surprisingly difficult. Flexbox (Flexible Box Layout) changed everything by introducing a parent-child relationship. To start, you define a Flex Container by applying `display: flex;` to a parent element (like a `<div>` or `<nav>`). Once 'Flex' is turned on, all direct children automatically become Flex Items. By default, these items will line up in a horizontal row, stretching or shrinking to fit the space available. Think of the container as a magnetic tray that automatically pulls its contents into a neat line.
To turn a standard list into a flex layout, follow these steps: 1. Create a parent `<div>` with the class name 'container'. 2. Add three `<div>` items inside it. 3. In your CSS, target the parent: `.container { display: flex; }`. 4. Observe how the items jump from a vertical stack to a horizontal row.
Quick Check
Which CSS property and value must be applied to a parent element to enable Flexbox for its children?
Answer
display: flex;
Once your container is 'Flexed,' you can control the horizontal spacing using `justify-content`. This property works along the Main Axis (usually the -axis). If you have three items and want them centered, you use `center`. If you want them pushed to the far ends with equal space between them, you use `space-between`. This is perfect for navigation bars where the logo is on the left and the menu links are on the right. It calculates the remaining space and divides it by the number of gaps such that .
Imagine you have 4 social media icons. You want them spread out evenly across the bottom of a card. 1. Set the parent to `display: flex;`. 2. Add `justify-content: space-around;`. 3. This adds space before, between, and after the items, making the layout look balanced on any screen width.
Quick Check
If you want your items to have equal space between them, but NO space at the very edges of the container, which value should you use?
Answer
space-between
While `justify-content` handles the horizontal, `align-items` handles the vertical Cross Axis (the -axis). This is a lifesaver when your items have different heights. Using `align-items: center;` ensures that a small logo and tall text links all sit perfectly on the same middle line. When you combine these, you can create a professional Navigation Bar. By setting `justify-content: space-between;` and `align-items: center;`, your layout remains stable even if the user resizes their browser window.
Create a header where the Logo is on the left and a 'Login' button is on the right, both vertically centered. 1. HTML: `<header> <img class='logo'> <button>Login</button> </header>` 2. CSS: `header { display: flex; justify-content: space-between; align-items: center; height: 80px; }`. 3. This ensures that even if the button is taller than the logo, they both stay centered relative to the height.
Which property controls alignment along the vertical (cross) axis?
If a container has `display: flex` and `justify-content: center`, where will the items appear?
Flexbox items will automatically stack vertically by default once 'display: flex' is applied.
Review Tomorrow
In 24 hours, try to recall the difference between the 'Main Axis' and the 'Cross Axis' and which CSS properties control each.
Practice Activity
Try this on your own: Create a simple webpage with a 'Gallery' section. Use Flexbox to make 3 images sit side-by-side with equal spacing between them.