Vertical or Horizontal Axis?

1section {
2  display: flex;
3  flex-direction: row | row-reverse | column | column-reverse;
4}

The example above illustrates the ability to specify the direction in which elements are arranged in a flex container. For the Flexbox model, there are four main layout options:

• row (default) - elements are arranged in a horizontal line from left to right.
• row-reverse - elements are arranged in a horizontal line from right to left.
• column - elements are arranged in a vertical line from top to bottom.
• column-reverse - elements are arranged in a vertical line from bottom to top.

Thanks to these options, we can control the direction of element placement inside the Flexbox container, allowing flexible adaptation of the page layout to our needs.

Exercise: Layout in the Flexbox Model

In this exercise, you will learn how to use the flex-direction property in the Flexbox model to control the direction of element placement in a flex container. Your task will be to create a web page with sections that are arranged in different directions using the flex-direction 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>Layout in the Flexbox Model</title>
8</head>
9<body>
10  <section class="flex-row">
11    <div>Element 1</div>
12    <div>Element 2</div>
13    <div>Element 3</div>
14  </section>
15  <section class="flex-row-reverse">
16    <div>Element 1</div>
17    <div>Element 2</div>
18    <div>Element 3</div>
19  </section>
20  <section class="flex-column">
21    <div>Element 1</div>
22    <div>Element 2</div>
23    <div>Element 3</div>
24  </section>
25  <section class="flex-column-reverse">
26    <div>Element 1</div>
27    <div>Element 2</div>
28    <div>Element 3</div>
29  </section>
30</body>
31</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-wrap: wrap;
4  gap: 20px;
5  margin: 0;
6  padding: 20px;
7  justify-content: space-around;
8}
9
10section {
11  display: flex;
12  border: 1px solid #000;
13  padding: 10px;
14  width: 45%;
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: Horizontal Layout (row)

Add a style for the .flex-row class to arrange elements in a horizontal line from left to right.

1/* Horizontal layout (row) */
2.flex-row {
3  flex-direction: row;
4}

Step 5: Reversed Horizontal Layout (row-reverse)

Add a style for the .flex-row-reverse class to arrange elements in a horizontal line from right to left.

1/* Reversed horizontal layout (row-reverse) */
2.flex-row-reverse {
3  flex-direction: row-reverse;
4}

Step 6: Vertical Layout (column)

Add a style for the .flex-column class to arrange elements in a vertical line from top to bottom.

1/* Vertical layout (column) */
2.flex-column {
3  flex-direction: column;
4}

Step 7: Reversed Vertical Layout (column-reverse)

Add a style for the .flex-column-reverse class to arrange elements in a vertical line from bottom to top.

1/* Reversed vertical layout (column-reverse) */
2.flex-column-reverse {
3  flex-direction: column-reverse;
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>Layout in the Flexbox Model</title>
8</head>
9<body>
10  <section class="flex-row">
11    <div>Element 1</div>
12    <div>Element 2</div>
13    <div>Element 3</div>
14  </section>
15  <section class="flex-row-reverse">
16    <div>Element 1</div>
17    <div>Element 2</div>
18    <div>Element 3</div>
19  </section>
20  <section class="flex-column">
21    <div>Element 1</div>
22    <div>Element 2</div>
23    <div>Element 3</div>
24  </section>
25  <section class="flex-column-reverse">
26    <div>Element 1</div>
27    <div>Element 2</div>
28    <div>Element 3</div>
29  </section>
30</body>
31</html>

CSS File (styles.css)

1body {
2  display: flex;
3  flex-wrap: wrap;
4  gap: 20px;
5  margin: 0;
6  padding: 20px;
7  justify-content: space-around;
8}
9
10section {
11  display: flex;
12  border: 1px solid #000;
13  padding: 10px;
14  width: 45%;
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/* Horizontal layout (row) */
28.flex-row {
29  flex-direction: row;
30}
31
32/* Reversed horizontal layout (row-reverse) */
33.flex-row-reverse {
34  flex-direction: row-reverse;
35}
36
37/* Vertical layout (column) */
38.flex-column {
39  flex-direction: column;
40}
41
42/* Reversed vertical layout (column-reverse) */
43.flex-column-reverse {
44  flex-direction: column-reverse;
45}

Experiment Further

1. Add more sections with different layouts to better understand how the different flex-direction 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 flex-direction property in the Flexbox model to control the direction of element placement in a flex 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 - Flexible Layouts</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="container">
11        <h1>Flexbox - Guide to Flexible Layouts</h1>
12
13        <section class="demo-section">
14            <h2>Flex Direction - Row (default)</h2>
15            <div class="flex-container flex-row">
16                <div class="flex-item">Element 1</div>
17                <div class="flex-item">Element 2</div>
18                <div class="flex-item">Element 3</div>
19            </div>
20        </section>
21
22        <section class="demo-section">
23            <h2>Flex Direction - Row Reverse</h2>
24            <div class="flex-container flex-row-reverse">
25                <div class="flex-item">Element 1</div>
26                <div class="flex-item">Element 2</div>
27                <div class="flex-item">Element 3</div>
28            </div>
29        </section>
30
31        <section class="demo-section">
32            <h2>Flex Direction - Column</h2>
33            <div class="flex-container flex-column">
34                <div class="flex-item">Element 1</div>
35                <div class="flex-item">Element 2</div>
36                <div class="flex-item">Element 3</div>
37            </div>
38        </section>
39
40        <section class="demo-section">
41            <h2>Justify Content - Space Between</h2>
42            <div class="flex-container justify-space-between">
43                <div class="flex-item">Start</div>
44                <div class="flex-item">Middle</div>
45                <div class="flex-item">End</div>
46            </div>
47        </section>
48
49        <section class="demo-section">
50            <h2>Justify Content - Center</h2>
51            <div class="flex-container justify-center">
52                <div class="flex-item">Center</div>
53                <div class="flex-item">Sides</div>
54            </div>
55        </section>
56
57        <section class="demo-section">
58            <h2>Align Items - Center</h2>
59            <div class="flex-container align-center">
60                <div class="flex-item">Height 1</div>
61                <div class="flex-item tall">Height 2<br>Second line</div>
62                <div class="flex-item">Height 3</div>
63            </div>
64        </section>
65
66        <section class="demo-section">
67            <h2>Flex Grow and Shrink</h2>
68            <div class="flex-container">
69                <div class="flex-item flex-grow-1">Flex-grow: 1</div>
70                <div class="flex-item flex-grow-2">Flex-grow: 2</div>
71                <div class="flex-item">Default</div>
72            </div>
73        </section>
74
75        <section class="demo-section">
76            <h2>Flex Wrap</h2>
77            <div class="flex-container flex-wrap">
78                <div class="flex-item wide">Wide 1</div>
79                <div class="flex-item wide">Wide 2</div>
80                <div class="flex-item wide">Wide 3</div>
81                <div class="flex-item wide">Wide 4</div>
82                <div class="flex-item wide">Wide 5</div>
83            </div>
84        </section>
85
86        <section class="demo-section">
87            <h2>Practical example - Navigation Bar</h2>
88            <nav class="navbar">
89                <div class="nav-brand">Logo</div>
90                <div class="nav-links">
91                    <a href="#">Home</a>
92                    <a href="#">About</a>
93                    <a href="#">Services</a>
94                    <a href="#">Contact</a>
95                </div>
96                <div class="nav-auth">
97                    <button>Login</button>
98                </div>
99            </nav>
100        </section>
101
102        <section class="demo-section">
103            <h2>Practical example - Card Layout</h2>
104            <div class="card-container">
105                <div class="card">
106                    <div class="card-header">Card 1</div>
107                    <div class="card-body">Content of the first card with a flexible layout.</div>
108                    <div class="card-footer">
109                        <button>Action</button>
110                    </div>
111                </div>
112                <div class="card">
113                    <div class="card-header">Card 2</div>
114                    <div class="card-body">Second card with longer content, showing how flexbox automatically adjusts element height.</div>
115                    <div class="card-footer">
116                        <button>Action</button>
117                    </div>
118                </div>
119                <div class="card">
120                    <div class="card-header">Card 3</div>
121                    <div class="card-body">Third card.</div>
122                    <div class="card-footer">
123                        <button>Action</button>
124                    </div>
125                </div>
126            </div>
127        </section>
128    </div>
129</body>
130</html>