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.
