Web · Flexbox Intro
Flex Container and Items
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — Introduction to Flexbox
Flexbox (Flexible Box Layout) is a CSS layout model that makes it easier to design flexible responsive layouts. It helps you arrange elements in a predictable way, especially when their size is unknown or dynamic.
Flexbox works with two main concepts:
1. Flex Container - The parent element with
display: flex
applied
2. Flex Items - The direct children of the flex container
Exercise 2 — The Flex Container
To create a flex container, you simply apply
display: flex
to an element. This transforms the element into a flex container and its direct children into flex items.
Let's compare how elements behave before and after applying flexbox:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
background-color: #f0f0f0;
border: 2px solid #333;
padding: 10px;
margin-bottom: 20px;
}
.flex-container {
display: flex;
}
.item {
background-color: #3498db;
color: white;
margin: 5px;
padding: 10px;
}
</style>
</head>
<body>
<h3>Without Flexbox (regular block elements):</h3>
<div class="box">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<h3>With Flexbox (display: flex):</h3>
<div class="box flex-container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
Key points about flex containers:
1. By default, flex items are arranged in a row (left to right)
2. Items only take up as much space as they need (unlike block elements)
3. You can also use
display: inline-flex
to make the container behave like an inline element
Benefits of Flexbox Containers
Flexbox solves many common layout problems:
- Centering elements vertically and horizontally
- Making items take up equal space
- Reordering elements without changing HTML
- Creating flexible layouts that adapt to screen sizes
Exercise 3 — Creating a Flex Container
Which CSS property correctly creates a flex container?
Options
• ```display: flex;```
• ```position: flex;```
• ```flex: container;```
• ```flex-display: on;```
Hint : The correct way to create a flex container is with the display property.
Exercise 4 — Flex Direction
By default, flex items are arranged in a row from left to right. You can change this using the
flex-direction
property on the container.
The
flex-direction
property has four possible values:
-
row
(default): Items flow horizontally from left to right
-
row-reverse
: Items flow horizontally from right to left
-
column
: Items flow vertically from top to bottom
-
column-reverse
: Items flow vertically from bottom to top
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
background-color: #f0f0f0;
border: 2px solid #333;
padding: 10px;
margin-bottom: 20px;
}
.row {
flex-direction: row; /* default */
}
.column {
flex-direction: column;
}
.item {
background-color: #3498db;
color: white;
margin: 5px;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<h3>flex-direction: row (default)</h3>
<div class="container row">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<h3>flex-direction: column</h3>
<div class="container column">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
Exercise 5 — Setting Flex Direction
Complete the CSS to make the flex items stack vertically from top to bottom.
.container {
display: flex;
____ ____;
}
Options: flex-direction: column row vertical column-reverse row-reverse
Hint : To make flex items stack vertically, you need to set the flex-direction property to change the main axis from horizontal to vertical.
Exercise 6 — Understanding Flex Items
Flex items are the direct children of a flex container. They have special properties that control how they behave within the flex layout.
By default, flex items:
1. Line up in a row (unless flex-direction is changed)
2. Start from the beginning of the main axis
3. Do not stretch to fill the container
4. Size themselves according to their content
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
background-color: #f0f0f0;
border: 2px solid #333;
padding: 10px;
height: 150px; /* Fixed height to show alignment */
}
.item {
background-color: #3498db;
color: white;
margin: 5px;
padding: 20px;
text-align: center;
}
.item-2 {
background-color: #e74c3c;
padding: 30px; /* Different size to show default behavior */
}
.item-3 {
background-color: #2ecc71;
padding: 10px; /* Different size to show default behavior */
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item item-2">Item 2</div>
<div class="item item-3">Item 3</div>
</div>
</body>
</html>
Exercise 7 — Flex Items Behavior
Which statement is true about flex items (the direct children of a flex container)?
Options
• By default, flex items align in a row and only take up as much space as they need
• Flex items always stretch to fill the entire container
• Flex items always stack vertically by default
• Only div elements can be flex items
Hint : Remember the default behavior of flex items - they follow the container's flex-direction (row by default) and size themselves based on content.
Exercise 8 — Flex Container vs Flex Items
Match each property with whether it applies to a flex container or flex items:
Items to match
• display: flex;
• flex-direction: column;
• Direct children of a flex container
• The element that has display: flex applied to it
Definitions
• Flex Container
• Flex Container
• Flex Items
• Flex Container
Exercise 9 — Reverse Flex Directions
In addition to
row
and
column
, flexbox provides reversed directions:
row-reverse
and
column-reverse
.
These reversed directions flip the order of the flex items while maintaining the same main axis:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
background-color: #f0f0f0;
border: 2px solid #333;
padding: 10px;
margin-bottom: 20px;
}
.row-reverse {
flex-direction: row-reverse;
}
.column-reverse {
flex-direction: column-reverse;
height: 200px; /* Adding height for better visualization */
}
.item {
background-color: #3498db;
color: white;
margin: 5px;
padding: 10px;
text-align: center;
width: 70px;
}
</style>
</head>
<body>
<h3>Regular row (left to right)</h3>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<h3>row-reverse (right to left)</h3>
<div class="container row-reverse">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<h3>column-reverse (bottom to top)</h3>
<div class="container column-reverse">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
Exercise 10 — Setting Flex Direction
Complete the CSS to create a flex container where the items flow from right to left.
.container {
display: flex;
____ ____;
}
Options: flex-direction: row-reverse column column-reverse row
Hint : Think about which flex-direction value would cause items to flow horizontally but in the opposite direction from normal.