Align Items

Part of the Styling with CSS section of Coddy's HTML journey — lesson 47 of 76.

In CSS, the align-items property controls how flex items are aligned along the cross axis (the opposite of the main axis). It helps position items vertically in a row or horizontally in a column. This property is useful for making layouts more flexible and responsive.

Here's the basic syntax for using the align-items property:

.container {
    display: flex;
    align-items: value;
}

value: The desired alignment for the flex items along the cross axis, which can be one of the following:

stretch: This is the default value. Flex items are stretched to fill the container along the cross axis while respecting min-width/max-width and min-height/max-height.

flex-start: Flex items are placed at the start of the cross axis.

flex-end: Flex items are placed at the end of the cross axis.

center: Flex items are centered along the cross axis.

baseline: Flex items are aligned such as their baselines align.

For example:

.container-start {
    display: flex;
    align-items: flex-start;
}

.container-center {
    display: flex;
    align-items: center;
}

In this example, the .container-start element will align its flex items to the start of the cross axis, the .container-center element will center its flex items along the cross axis.

Challenge

Easy

You are given an HTML document with two divisions (<div>), each containing three child divisions.

Follow the steps below:

Style the <strong>.seas</strong> element:
- Write a CSS rule that targets the <div> element with the class .seas.
- Set display to flex to enable flexible positioning of child elements.
- Set the align-items property to center to align the flex items in the middle of the cross axis.
Style the <strong>.oceans</strong> element:
- Write a CSS rule that targets the <div> element with the class .oceans.
- Set display to flex to enable flexible positioning of child elements.
- Set the align-items property to flex-end to align the flex items at the end of the cross axis.

Cheat sheet

The align-items property controls how flex items are aligned along the cross axis (opposite of the main axis):

.container {
    display: flex;
    align-items: value;
}

Available values:

stretch: Default. Items stretch to fill the container
flex-start: Items placed at the start of the cross axis
flex-end: Items placed at the end of the cross axis
center: Items centered along the cross axis
baseline: Items aligned by their baselines

.container-start {
    display: flex;
    align-items: flex-start;
}

.container-center {
    display: flex;
    align-items: center;
}

Try it yourself

<html>
<head>
    <title>Align Items</title>
    <style>
        .container {
            display: flex;
            height: 200px; /* Added for visualization */
            border: 2px solid darkblue; /* Added for visualization */
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="seas">
            <div>Black Sea</div>
            <div>Caribbean Sea</div>
            <div>Dead Sea</div>
        </div>
        <div class="oceans">
            <div>Atlantic Ocean</div>
            <div>Pacific Ocean</div>
            <div>Indian Ocean</div>
        </div>
    </div>
</body>
</html>