We use cookies to enhance your experience on the site
Privacy Policy
OK
CodeWorlds

Aligning Elements on the Vertical Axis

1section {
2  display: flex;
3  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end;
4}
  • The "stretch" property (default) - stretches elements to fill the container while respecting any min-width/max-width constraints.
  • The "flex-start" / "start" / "self-start" property - elements are placed at the start of the cross axis. The difference between them is subtle and depends on flex-direction or writing-mode rules.
  • The "flex-end" / "end" / "self-end" property - elements are placed at the end of the cross axis. The difference also depends on flex-direction or writing-mode rules.
  • The "center" property - elements are centered on the cross axis.
  • The "baseline" property - elements are aligned, for example, based on their baselines.

Thanks to these properties, we can precisely control the position and alignment of elements in a Flexbox container, allowing us to create aesthetic and well-fitted layouts on a web page.

Exercise: Aligning Elements on the Vertical Axis

In this exercise, you will learn how to use the 

align-items
property in the Flexbox model to precisely control the position and alignment of elements on the vertical axis. Your task will be to create a web page with sections that are distributed in different layouts using the 
align-items
property.

Step 1: Create a Basic HTML Document Structure

First, create a new HTML file and add a basic HTML document structure. Add a 

<section>
element with several 
<div>
elements in the document body (
<body>
).

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Link CSS file -->
7  <title>Aligning Elements on the Vertical Axis</title>
8</head>
9<body>
10  <section class="stretch">
11    <div>Element 1</div>
12    <div>Element 2</div>
13    <div>Element 3</div>
14  </section>
15  <section class="flex-start">
16    <div>Element 1</div>
17    <div>Element 2</div>
18    <div>Element 3</div>
19  </section>
20  <section class="flex-end">
21    <div>Element 1</div>
22    <div>Element 2</div>
23    <div>Element 3</div>
24  </section>
25  <section class="center">
26    <div>Element 1</div>
27    <div>Element 2</div>
28    <div>Element 3</div>
29  </section>
30  <section class="baseline">
31    <div>Element 1</div>
32    <div>Element 2</div>
33    <div>Element 3</div>
34  </section>
35</body>
36</html>

Step 2: Create a CSS File

Open or create a new CSS file and save it as 

styles.css
.

Step 3: Basic Styling

Add basic styles for the 

<section>
and 
<div>
elements so they are visible on the page.

1body {
2  display: flex;
3  flex-direction: column;
4  align-items: center;
5  gap: 20px;
6  margin: 0;
7  padding: 20px;
8}
9
10section {
11  display: flex;
12  border: 1px solid #000;
13  padding: 10px;
14  width: 80%;
15  height: 200px;
16  margin: 10px 0;
17}
18
19section div {
20  background-color: lightblue;
21  margin: 5px;
22  padding: 20px;
23  text-align: center;
24  flex: 1;
25}

Step 4: Layout with 
align-items: stretch

Add a style for the 

.stretch
class to stretch elements to fill the container.

1/* Layout with align-items: stretch */
2.stretch {
3  align-items: stretch;
4}

Step 5: Layout with 
align-items: flex-start

Add a style for the 

.flex-start
class to place elements at the start of the cross axis.

1/* Layout with align-items: flex-start */
2.flex-start {
3  align-items: flex-start;
4}

Step 6: Layout with 
align-items: flex-end

Add a style for the 

.flex-end
class to place elements at the end of the cross axis.

1/* Layout with align-items: flex-end */
2.flex-end {
3  align-items: flex-end;
4}

Step 7: Layout with 
align-items: center

Add a style for the 

.center
class to center elements on the cross axis.

1/* Layout with align-items: center */
2.center {
3  align-items: center;
4}

Step 8: Layout with 
align-items: baseline

Add a style for the 

.baseline
class to align elements based on their baselines.

1/* Layout with align-items: baseline */
2.baseline {
3  align-items: baseline;
4}

Result

After completing all the steps, your HTML and CSS files should look as follows:

HTML File (index.html)

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Link CSS file -->
7  <title>Aligning Elements on the Vertical Axis</title>
8</head>
9<body>
10  <section class="stretch">
11    <div>Element 1</div>
12    <div>Element 2</div>
13    <div>Element 3</div>
14  </section>
15  <section class="flex-start">
16    <div>Element 1</div>
17    <div>Element 2</div>
18    <div>Element 3</div>
19  </section>
20  <section class="flex-end">
21    <div>Element 1</div>
22    <div>Element 2</div>
23    <div>Element 3</div>
24  </section>
25  <section class="center">
26    <div>Element 1</div>
27    <div>Element 2</div>
28    <div>Element 3</div>
29  </section>
30  <section class="baseline">
31    <div>Element 1</div>
32    <div>Element 2</div>
33    <div>Element 3</div>
34  </section>
35</body>
36</html>

CSS File (styles.css)

1body {
2  display: flex;
3  flex-direction: column;
4  align-items: center;
5  gap: 20px;
6  margin: 0;
7  padding: 20px;
8}
9
10section {
11  display: flex;
12  border: 1px solid #000;
13  padding: 10px;
14  width: 80%;
15  height: 200px;
16  margin: 10px 0;
17}
18
19section div {
20  background-color: lightblue;
21  margin: 5px;
22  padding: 20px;
23  text-align: center;
24  flex: 1;
25}
26
27/* Layout with align-items: stretch */
28.stretch {
29  align-items: stretch;
30}
31
32/* Layout with align-items: flex-start */
33.flex-start {
34  align-items: flex-start;
35}
36
37/* Layout with align-items: flex-end */
38.flex-end {
39  align-items: flex-end;
40}
41
42/* Layout with align-items: center */
43.center {
44  align-items: center;
45}
46
47/* Layout with align-items: baseline */
48.baseline {
49  align-items: baseline;
50}

Experiment Further

  1. Add more sections with different 
    align-items
    values to better understand how the different options work.
  2. Try adding more styles to your page, such as changing colors, sizes, and other CSS properties.
  3. Test your skills by creating more complex layouts using different combinations of Flexbox properties.

After completing this exercise, you should better understand how to use the 

align-items
property in the Flexbox model to precisely control the position and alignment of elements on the vertical axis.

Go to CodeWorlds→