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

Vertical or Horizontal Axis?

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

alt text

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.

Go to CodeWorlds→