Aligning Elements on the Vertical and Horizontal Axes

1. Main Axis

The main axis is the primary axis along which flex items are arranged in a flex container. The direction of this axis is controlled by the flex-direction property.

• flex-direction: row: The main axis runs horizontally from left to right (for left-to-right languages). This is the default direction.

• flex-direction: column: The main axis runs vertically from top to bottom.

The justify-content property is used to manage the layout of items along the main axis.

2. Cross Axis

The cross axis runs perpendicular to the main axis. If the main axis is horizontal, the cross axis will be vertical and vice versa.

The align-items property is used to manage the layout of items along the cross axis.

Examples and usage

Horizontal Axis (Row):

css .container { display: flex; flex-direction: row; // main axis is horizontal justify-content: center; // centers items along the main axis align-items: flex-start; // aligns items to the top of the cross axis }

Vertical Axis (Column):

css .container { display: flex; flex-direction: column; // main axis is vertical justify-content: space-around; // distributes items evenly along the main axis align-items: flex-end; // aligns items to the right of the cross axis }

Summary

Understanding the vertical and horizontal axes in Flexbox is crucial for controlling the layout of elements on a page.

Exercise: Aligning Elements on the Vertical and Horizontal Axes

In this exercise, you will learn how to use the flex-direction, justify-content, and align-items properties in the Flexbox model to precisely control the layout of elements in a Flexbox container on both the vertical and horizontal axes. Your task will be to create a web page with containers that are arranged in different layouts using these properties.

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 Both Axes</title>
8</head>
9<body>
10  <section class="container row-center-start">
11    <div>Element 1</div>
12    <div>Element 2</div>
13    <div>Element 3</div>
14  </section>
15  <section class="container column-around-end">
16    <div>Element 1</div>
17    <div>Element 2</div>
18    <div>Element 3</div>
19  </section>
20  <section class="container row-space-between-center">
21    <div>Element 1</div>
22    <div>Element 2</div>
23    <div>Element 3</div>
24  </section>
25</body>
26</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
10.container {
11  display: flex;
12  border: 1px solid #000;
13  padding: 10px;
14  width: 80%;
15  height: 200px;
16  margin: 10px 0;
17}
18
19.container div {
20  background-color: lightblue;
21  margin: 5px;
22  padding: 20px;
23  text-align: center;
24  flex: 1;
25}

Step 4: Layout with row, justify-content: center and align-items: flex-start

Add a style for the .row-center-start class to position elements horizontally, centered along the main axis and aligned to the start of the cross axis.

1/* Layout with row, justify-content: center and align-items: flex-start */
2.row-center-start {
3  flex-direction: row;
4  justify-content: center;
5  align-items: flex-start;
6}

Step 5: Layout with column, justify-content: space-around and align-items: flex-end

Add a style for the .column-around-end class to position elements vertically, evenly distributed along the main axis and aligned to the end of the cross axis.

1/* Layout with column, justify-content: space-around and align-items: flex-end */
2.column-around-end {
3  flex-direction: column;
4  justify-content: space-around;
5  align-items: flex-end;
6}

Step 6: Layout with row, justify-content: space-between and align-items: center

Add a style for the .row-space-between-center class to position elements horizontally, evenly distributed with spacing between them along the main axis and centered on the cross axis.

1/* Layout with row, justify-content: space-between and align-items: center */
2.row-space-between-center {
3  flex-direction: row;
4  justify-content: space-between;
5  align-items: center;
6}

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 Both Axes</title>
8</head>
9<body>
10  <section class="container row-center-start">
11    <div>Element 1</div>
12    <div>Element 2</div>
13    <div>Element 3</div>
14  </section>
15  <section class="container column-around-end">
16    <div>Element 1</div>
17    <div>Element 2</div>
18    <div>Element 3</div>
19  </section>
20  <section class="container row-space-between-center">
21    <div>Element 1</div>
22    <div>Element 2</div>
23    <div>Element 3</div>
24  </section>
25</body>
26</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
10.container {
11  display: flex;
12  border: 1px solid #000;
13  padding: 10px;
14  width: 80%;
15  height: 200px;
16  margin: 10px 0;
17}
18
19.container div {
20  background-color: lightblue;
21  margin: 5px;
22  padding: 20px;
23  text-align: center;
24  flex: 1;
25}
26
27/* Layout with row, justify-content: center and align-items: flex-start */
28.row-center-start {
29  flex-direction: row;
30  justify-content: center;
31  align-items: flex-start;
32}
33
34/* Layout with column, justify-content: space-around and align-items: flex-end */
35.column-around-end {
36  flex-direction: column;
37  justify-content: space-around;
38  align-items: flex-end;
39}
40
41/* Layout with row, justify-content: space-between and align-items: center */
42.row-space-between-center {
43  flex-direction: row;
44  justify-content: space-between;
45  align-items: center;
46}

Additional Task

1. Create an additional section with your own layout using different combinations of flex-direction, justify-content, and align-items properties.
2. Add styles to change background colors, margins, or other element properties to better understand how the different options work.
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 flex-direction, justify-content, and align-items properties in the Flexbox model to precisely control the layout of elements in a container.

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 - Align Items</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="container">
11        <h1>Align Items - Alignment along the cross axis</h1>
12        <p class="subtitle">Control the position of elements along the cross axis</p>
13
14        <section class="demo-section">
15            <h2>align-items: stretch (default)</h2>
16            <div class="flex-container align-stretch">
17                <div class="flex-item">Element 1</div>
18                <div class="flex-item">Element 2<br>Two lines</div>
19                <div class="flex-item">Element 3</div>
20            </div>
21            <p class="description">Elements stretch to fill the container</p>
22        </section>
23
24        <section class="demo-section">
25            <h2>align-items: flex-start</h2>
26            <div class="flex-container align-start">
27                <div class="flex-item">Element 1</div>
28                <div class="flex-item tall">Element 2<br>Taller<br>Element</div>
29                <div class="flex-item">Element 3</div>
30            </div>
31            <p class="description">Elements aligned to the top edge of the container</p>
32        </section>
33
34        <section class="demo-section">
35            <h2>align-items: flex-end</h2>
36            <div class="flex-container align-end">
37                <div class="flex-item">Element 1</div>
38                <div class="flex-item tall">Element 2<br>Taller<br>Element</div>
39                <div class="flex-item">Element 3</div>
40            </div>
41            <p class="description">Elements aligned to the bottom edge of the container</p>
42        </section>
43
44        <section class="demo-section">
45            <h2>align-items: center</h2>
46            <div class="flex-container align-center">
47                <div class="flex-item">Element 1</div>
48                <div class="flex-item tall">Element 2<br>Taller<br>Element</div>
49                <div class="flex-item">Element 3</div>
50            </div>
51            <p class="description">Elements centered along the cross axis</p>
52        </section>
53
54        <section class="demo-section">
55            <h2>align-items: baseline</h2>
56            <div class="flex-container align-baseline">
57                <div class="flex-item small">Small</div>
58                <div class="flex-item medium">Medium</div>
59                <div class="flex-item large">Large</div>
60            </div>
61            <p class="description">Elements aligned along the text baseline</p>
62        </section>
63
64        <section class="demo-section practice">
65            <h2>Practice: Egyptian gallery</h2>
66            <div class="gallery">
67                <div class="gallery-item">
68                    <div class="icon">◆</div>
69                    <div class="title">Vase</div>
70                </div>
71                <div class="gallery-item">
72                    <div class="icon large-icon">▲</div>
73                    <div class="title">Pharaoh's<br>Crown</div>
74                </div>
75                <div class="gallery-item">
76                    <div class="icon">◆</div>
77                    <div class="title">Papyrus</div>
78                </div>
79            </div>
80        </section>
81    </div>
82</body>
83</html>