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.

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    <title>Flexbox - Justify Content</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="container">
11        <h1>Justify Content - Distribution along the main axis</h1>
12        <p class="subtitle">Control the distribution of elements along the main axis of a flex container</p>
13
14        <section class="demo-section">
15            <h2>justify-content: flex-start (default)</h2>
16            <div class="flex-container justify-start">
17                <div class="flex-item">1</div>
18                <div class="flex-item">2</div>
19                <div class="flex-item">3</div>
20            </div>
21            <p class="description">Elements are aligned to the start of the container</p>
22        </section>
23
24        <section class="demo-section">
25            <h2>justify-content: flex-end</h2>
26            <div class="flex-container justify-end">
27                <div class="flex-item">1</div>
28                <div class="flex-item">2</div>
29                <div class="flex-item">3</div>
30            </div>
31            <p class="description">Elements are aligned to the end of the container</p>
32        </section>
33
34        <section class="demo-section">
35            <h2>justify-content: center</h2>
36            <div class="flex-container justify-center">
37                <div class="flex-item">1</div>
38                <div class="flex-item">2</div>
39                <div class="flex-item">3</div>
40            </div>
41            <p class="description">Elements are centered in the container</p>
42        </section>
43
44        <section class="demo-section">
45            <h2>justify-content: space-between</h2>
46            <div class="flex-container justify-between">
47                <div class="flex-item">1</div>
48                <div class="flex-item">2</div>
49                <div class="flex-item">3</div>
50            </div>
51            <p class="description">First element at the start, last at the end, equal spacing between</p>
52        </section>
53
54        <section class="demo-section">
55            <h2>justify-content: space-around</h2>
56            <div class="flex-container justify-around">
57                <div class="flex-item">1</div>
58                <div class="flex-item">2</div>
59                <div class="flex-item">3</div>
60            </div>
61            <p class="description">Equal spacing around each element</p>
62        </section>
63
64        <section class="demo-section">
65            <h2>justify-content: space-evenly</h2>
66            <div class="flex-container justify-evenly">
67                <div class="flex-item">1</div>
68                <div class="flex-item">2</div>
69                <div class="flex-item">3</div>
70            </div>
71            <p class="description">Equal spacing between all elements and edges</p>
72        </section>
73    </div>
74</body>
75</html>