Web · Flexbox Intro
Alignment and Distribution
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — Understanding Flexbox Axes
Before we learn how to align items in Flexbox, we need to understand the two axes that Flexbox operates on: the main axis and the cross axis.
By default (when flex-direction is row):
- The main axis runs horizontally from left to right
- The cross axis runs vertically from top to bottom
When you change the flex-direction (to column, for example), the axes switch:
- With flex-direction: column, the main axis runs vertically
- The cross axis then runs horizontally.
Here is a code example to illustrate this.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
/* By default, flex-direction is row */
background-color: #f0f0f0;
border: 1px solid #ccc;
height: 200px;
margin-bottom: 20px;
}
.column {
/* Changing to column */
flex-direction: column;
}
.item {
background-color: #3498db;
color: white;
padding: 20px;
margin: 10px;
font-size: 20px;
}
</style>
</head>
<body>
<h3>flex-direction: row (default)</h3>
<p>Main axis: horizontal, Cross axis: vertical</p>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h3>flex-direction: column</h3>
<p>Main axis: vertical, Cross axis: horizontal</p>
<div class="container column">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
Understanding which axis is which is crucial because:
- The
justify-content
property aligns items along the main axis
- The
align-items
property aligns items along the cross axis
Exercise 2 — Aligning Items with justify-content
The
justify-content
property aligns flex items along the main axis of the flex container. It helps distribute extra free space when items don't use all available space.
Here are the main values for
justify-content
:
Let's understand each value:
-
flex-start
(default): Items are packed at the start of the main axis
-
flex-end
: Items are packed at the end of the main axis
-
center
: Items are centered along the main axis
-
space-between
: Items are evenly distributed; first item at start, last at end
-
space-around
: Items are evenly distributed with equal space around them
-
space-evenly
: Items are distributed so that the spacing between any two items is equal
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
background-color: #f0f0f0;
border: 1px solid #ccc;
height: 100px;
margin-bottom: 20px;
}
.flex-start { justify-content: flex-start; }
.flex-end { justify-content: flex-end; }
.center { justify-content: center; }
.space-between { justify-content: space-between; }
.space-around { justify-content: space-around; }
.space-evenly { justify-content: space-evenly; }
.item {
background-color: #3498db;
color: white;
padding: 10px;
width: 60px;
text-align: center;
margin: 5px;
}
</style>
</head>
<body>
<h3>justify-content: flex-start (default)</h3>
<div class="container flex-start">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h3>justify-content: flex-end</h3>
<div class="container flex-end">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h3>justify-content: center</h3>
<div class="container center">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h3>justify-content: space-between</h3>
<div class="container space-between">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h3>justify-content: space-around</h3>
<div class="container space-around">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h3>justify-content: space-evenly</h3>
<div class="container space-evenly">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
Space Distribution Differences
- In
space-between
, outer edges of first and last items touch the container edges
- In
space-around
, items have half-spaces on the ends
- In
space-evenly
, all spaces are equal (between items and at edges)
Exercise 3 — Selecting the Right justify-content Value
You want to create a navigation bar where the links are evenly spaced across the entire width, with the first link touching the left edge and the last link touching the right edge. Which
justify-content
value should you use?
Options
• ```justify-content: space-between;```
• ```justify-content: space-around;```
• ```justify-content: space-evenly;```
• ```justify-content: center;```
Hint : Think about which value places items so that the first and last items are at the edges of the container.
Exercise 4 — Aligning Items with align-items
While
justify-content
aligns items along the main axis,
align-items
aligns them along the cross axis (perpendicular to the main axis).
Here are the main values for
align-items
:
Let's understand each value:
-
stretch
(default): Items are stretched to fill the container (respecting min/max-width/height)
-
flex-start
: Items are placed at the start of the cross axis
-
flex-end
: Items are placed at the end of the cross axis
-
center
: Items are centered along the cross axis
-
baseline
: Items are aligned based on their text baselines
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
background-color: #f0f0f0;
border: 1px solid #ccc;
height: 200px;
margin-bottom: 20px;
}
.stretch { align-items: stretch; } /* Default */
.flex-start { align-items: flex-start; }
.flex-end { align-items: flex-end; }
.center { align-items: center; }
.baseline { align-items: baseline; }
.item {
background-color: #3498db;
color: white;
padding: 10px;
width: 80px;
text-align: center;
margin: 5px;
}
/* For baseline demo */
.big-text { font-size: 24px; }
.small-text { font-size: 12px; }
</style>
</head>
<body>
<h3>align-items: stretch (default)</h3>
<div class="container stretch">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h3>align-items: flex-start</h3>
<div class="container flex-start">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h3>align-items: flex-end</h3>
<div class="container flex-end">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h3>align-items: center</h3>
<div class="container center">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h3>align-items: baseline</h3>
<div class="container baseline">
<div class="item">1</div>
<div class="item big-text">2</div>
<div class="item small-text">3</div>
</div>
</body>
</html>
Understanding Baseline
The baseline value is particularly useful when you have different font sizes or elements with varying heights, as it aligns them based on the text baseline rather than their container edges.
Exercise 5 — Completing the Alignment Code
Complete the CSS code to vertically center all items in a flex container while keeping them at the start of the container horizontally.
.nav-container {
display: flex;
height: 80px;
background-color: #f0f0f0;
____ flex-start;
____ center;
}
Options: justify-content: align-items: align-content: flex-direction:
Hint : Remember which property controls alignment along the main axis (horizontal by default) and which controls alignment along the cross axis (vertical by default).
Exercise 6 — Combining justify-content and align-items
The real power of Flexbox alignment comes when you combine
justify-content
and
align-items
to control positioning in both dimensions.
Here are some common combinations:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
background-color: #f0f0f0;
border: 1px solid #ccc;
height: 200px;
margin-bottom: 20px;
}
.top-left {
justify-content: flex-start;
align-items: flex-start;
}
.top-center {
justify-content: center;
align-items: flex-start;
}
.center-center {
justify-content: center;
align-items: center;
}
.space-between-center {
justify-content: space-between;
align-items: center;
}
.item {
background-color: #3498db;
color: white;
padding: 20px;
width: 60px;
text-align: center;
margin: 5px;
}
</style>
</head>
<body>
<h3>Top Left (justify-content: flex-start; align-items: flex-start)</h3>
<div class="container top-left">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h3>Top Center (justify-content: center; align-items: flex-start)</h3>
<div class="container top-center">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h3>Center Center (justify-content: center; align-items: center)</h3>
<div class="container center-center">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h3>Space Between Center (justify-content: space-between; align-items: center)</h3>
<div class="container space-between-center">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
These combinations allow you to place items precisely where you want them in the container. Some common use cases include:
-
justify-content: center; align-items: center;
- Perfect for centering a single element or group of elements
-
justify-content: space-between; align-items: center;
- Great for navigation bars with items distributed across the width
-
justify-content: flex-start; align-items: center;
- Good for left-aligned content that's vertically centered
Exercise 7 — Matching Alignment Properties with Layouts
Match each layout requirement with the correct combination of flexbox alignment properties:
Items to match
• Center everything horizontally and vertically
• Align items to the left, but center them vertically
• Distribute items evenly across the full width, aligned to the top
• Group items at the right side, bottom-aligned
Definitions
• justify-content: center; align-items: center;
• justify-content: flex-start; align-items: center;
• justify-content: space-between; align-items: flex-start;
• justify-content: flex-end; align-items: flex-end;
Exercise 8 — Match Alignment Properties and Use Cases
Match each alignment need with the correct flexbox property to use:
Items to match
• Center items horizontally in a row flex container
• Center items vertically in a row flex container
• Space items evenly across the width
• Align items to the bottom of a container
Definitions
• justify-content: center;
• align-items: center;
• justify-content: space-between;
• align-items: flex-end;
Exercise 9 — Which Alignment Property to Use?
You have a flex container with
flex-direction: row
(default) and you want to center an item vertically. Which property should you use?
Options
• ```align-items: center;```
• ```justify-content: center;```
• ```align-content: center;```
• ```vertical-align: middle;```
Hint : Remember which axis is which. With flex-direction: row, the cross axis runs vertically, and align-items controls alignment along the cross axis.
Exercise 10 — Complete the Navbar Alignment
Complete the CSS to create a navbar where items are spread across the full width, with the first item at the left edge, the last item at the right edge, and all items centered vertically:
.navbar {
display: flex;
height: 60px;
____ space-between;
____ center;
}
Options: justify-content: align-items: flex-direction: flex-wrap:
Hint : Think about which property controls horizontal distribution and which controls vertical alignment in a row-based flex container.