Introduction
In this lab, you will explore the align-items property in Flexbox, a powerful CSS layout technique for controlling vertical alignment of flex items within a container. Through a series of hands-on exercises, you'll learn how to manipulate flex items using different alignment values such as stretch, flex-start, flex-end, center, and baseline.
The lab will guide you through creating HTML structures, applying various alignment strategies, and understanding how the align-items property impacts the layout of flex containers. By experimenting with practical examples, you'll gain insights into how to effectively control the positioning and sizing of elements in responsive web designs.
Understand Align-Items Attribute Basics
In this step, you'll learn the fundamental concepts of the align-items property in Flexbox, which is crucial for controlling the vertical alignment of flex items within a flex container.
The align-items property defines how flex items are aligned along the cross-axis (vertically in a row layout, horizontally in a column layout). By default, flex items are stretched to fill the container's cross-axis.
Let's create a simple HTML and CSS example to demonstrate the basic usage of align-items:
<!doctype html>
<html>
<head>
<style>
.flex-container {
display: flex;
height: 200px;
border: 2px solid blue;
}
.flex-item {
width: 100px;
background-color: lightgreen;
margin: 5px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
In this example, we've created a flex container with three flex items. By default, the align-items property is set to stretch, which means the items will stretch to fill the container's height.
The main align-items values are:
stretch(default): Items stretch to fill the containerflex-start: Items align to the start of the cross-axisflex-end: Items align to the end of the cross-axiscenter: Items are centered along the cross-axisbaseline: Items are aligned based on their text baseline
Example output of the default stretch alignment:
[Item 1][Item 2][Item 3]
------ ------ ------
(full (full (full
height) height) height)
Open the WebIDE and create a new file named flexbox-align.html in the ~/project directory. Copy the HTML code above into this file and save it. You can then open the file in a web browser to see the default alignment in action.
Create HTML Structure for Flexbox Layout
In this step, you'll learn how to create a basic HTML structure that sets up a Flexbox layout. We'll build upon the previous step by creating a more structured HTML document with multiple flex items.
Open the WebIDE and create a new file named flexbox-layout.html in the ~/project directory. Use the following HTML structure to demonstrate a typical Flexbox layout:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Flexbox Layout Example</title>
<style>
.flex-container {
display: flex;
background-color: #f0f0f0;
padding: 20px;
border: 2px solid #333;
}
.flex-item {
width: 100px;
height: 100px;
margin: 10px;
background-color: #4caf50;
color: white;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
<div class="flex-item">Item 4</div>
<div class="flex-item">Item 5</div>
</div>
</body>
</html>
Let's break down the key components of this Flexbox layout:
- The
.flex-containerhasdisplay: flex, which enables Flexbox layout - We've added 5 flex items with consistent styling
- The container has a light gray background and padding
- Each item has a fixed width and height, with a green background
Example output will look like:
[Item 1][Item 2][Item 3][Item 4][Item 5]
↑ ↑ ↑ ↑ ↑
Green Green Green Green Green
boxes boxes boxes boxes boxes
Save the file and open it in a web browser to see the Flexbox layout in action. Notice how the items automatically distribute themselves horizontally with equal spacing.
Apply Stretch Alignment to Flex Items
In this step, you'll explore the default stretch alignment in Flexbox and understand how it automatically sizes flex items along the cross-axis.
Open the flexbox-layout.html file you created in the previous step. We'll modify the CSS to demonstrate the stretch alignment more clearly:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Stretch Alignment in Flexbox</title>
<style>
.flex-container {
display: flex;
height: 300px; /* Fixed container height */
background-color: #f0f0f0;
padding: 20px;
border: 2px solid #333;
}
.flex-item {
width: 100px;
margin: 10px;
background-color: #4caf50;
color: white;
text-align: center;
/* No explicit height set */
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
<div class="flex-item">Item 4</div>
<div class="flex-item">Item 5</div>
</div>
</body>
</html>
Key points about stretch alignment:
- By default,
align-items: stretchis applied to flex containers - Flex items will automatically stretch to fill the container's height
- This happens when no explicit height is set on the items
- The stretching occurs along the cross-axis (vertically in a row layout)
Example output visualization:
[Item 1][Item 2][Item 3][Item 4][Item 5]
↑ ↑ ↑ ↑ ↑
Stretched Stretched Stretched Stretched Stretched
to full to full to full to full to full
height height height height height
Notice how the items automatically expand to fill the 300px height of the flex container, even though no individual item height was specified. This is the default stretch behavior of Flexbox.
Save the file and open it in a web browser to see the stretch alignment in action. Each item will be the full height of the container, creating a uniform, stretched appearance.
Experiment with Different Align-Items Values
In this step, you'll explore the different align-items values and see how they affect the vertical alignment of flex items within a container.
Open the flexbox-layout.html file and update the CSS to demonstrate various align-items values:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Align-Items Experiment</title>
<style>
.flex-container {
display: flex;
height: 300px;
background-color: #f0f0f0;
border: 2px solid #333;
margin-bottom: 20px;
}
.flex-item {
width: 100px;
margin: 10px;
background-color: #4caf50;
color: white;
text-align: center;
line-height: 50px;
}
/* Different align-items classes */
.stretch {
align-items: stretch;
}
.flex-start {
align-items: flex-start;
}
.flex-end {
align-items: flex-end;
}
.center {
align-items: center;
}
.baseline {
align-items: baseline;
}
</style>
</head>
<body>
<div class="flex-container stretch">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
<div class="flex-container flex-start">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
<div class="flex-container flex-end">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
<div class="flex-container center">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
<div class="flex-container baseline">
<div class="flex-item" style="font-size: 16px;">Item 1</div>
<div class="flex-item" style="font-size: 24px;">Item 2</div>
<div class="flex-item" style="font-size: 32px;">Item 3</div>
</div>
</body>
</html>
Key align-items values explained:
stretch(default): Items stretch to fill container heightflex-start: Items align to the top of the containerflex-end: Items align to the bottom of the containercenter: Items centered verticallybaseline: Items aligned based on their text baseline
Example output visualization:
Stretch: [Item 1][Item 2][Item 3] (full height)
Flex-Start: [Item 1][Item 2][Item 3] (top-aligned)
Flex-End: [Item 1][Item 2][Item 3] (bottom-aligned)
Center: [Item 1][Item 2][Item 3] (vertically centered)
Baseline: [Item 1][Item 2][Item 3] (text-baseline aligned)
Save the file and open it in a web browser to see the different alignment styles. Notice how each container demonstrates a unique vertical alignment of flex items.
Customize Flex Container Alignment
In this step, you'll learn how to create a more complex Flexbox layout by combining different alignment techniques and adding individual item customization.
Open the flexbox-layout.html file and update it with the following advanced example:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Advanced Flexbox Alignment</title>
<style>
.flex-container {
display: flex;
height: 300px;
background-color: #f0f0f0;
border: 2px solid #333;
margin-bottom: 20px;
padding: 10px;
}
.flex-item {
width: 100px;
margin: 10px;
background-color: #4caf50;
color: white;
text-align: center;
line-height: 50px;
}
/* Custom alignment scenarios */
.mixed-alignment {
align-items: center;
}
.mixed-alignment .special-item {
align-self: flex-end;
}
.mixed-alignment .tall-item {
align-self: stretch;
height: auto;
}
</style>
</head>
<body>
<div class="flex-container mixed-alignment">
<div class="flex-item">Normal</div>
<div class="flex-item special-item">Special</div>
<div class="flex-item tall-item">Tall Item</div>
</div>
</body>
</html>
Key customization techniques:
align-items: centersets default vertical centeringalign-self: flex-endoverrides container alignment for specific itemsalign-self: stretchallows individual item to stretch differently
Example output visualization:
[Normal Item] [Special Item] [Tall Item]
↑ ↓ ↑
Centered Bottom-aligned Stretched
The example demonstrates how you can:
- Set a default alignment for all items
- Override alignment for specific items
- Create more dynamic and flexible layouts
Save the file and open it in a web browser to see the customized alignment in action.
Summary
In this lab, participants explore the align-items property in Flexbox, learning how to control vertical alignment of flex items within a container. The lab provides a comprehensive introduction to different alignment strategies, starting with the default stretch behavior and demonstrating how flex items can be positioned using values like flex-start, flex-end, center, and baseline.
Through hands-on HTML and CSS examples, learners gain practical experience in manipulating flex container layouts, understanding how the align-items property impacts the positioning of elements along the cross-axis. The lab emphasizes the importance of this property in creating responsive and visually balanced web designs, enabling participants to develop more sophisticated and flexible layout techniques.
