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

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.

Go to CodeWorlds→