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

Aligning Elements on the Horizontal Axis

1section {
2  display: flex;
3  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right;
4}
  • The "flex-start" property (default) - elements are distributed toward the start direction.
  • The "flex-end" property - elements are distributed toward the end direction.
  • The "start" property - elements are distributed toward the start according to writing-mode.
  • The "end" property - elements are distributed toward the end according to writing-mode.
  • The "left" property - elements are distributed toward the left edge of the container, unless flex-direction doesn't apply, then it behaves like "start".
  • The "right" property - elements are distributed toward the right edge of the container, unless flex-direction doesn't apply, then it behaves like "end".
  • The "center" property - elements are centered along the line.
  • The "space-between" property - elements are evenly distributed in the line; the first element is at the start line and the last element is at the end line.
  • The "space-around" property - elements are evenly distributed in the line with equal space around them. Note that the spaces on both sides are larger than the spaces between elements.
  • The "space-evenly" property - elements are evenly distributed in the line so that the spacing between any two elements (and the spacing from the edges) is equal.

Thanks to these properties, we can precisely control the distribution of elements in a Flexbox container, ensuring a harmonious and aesthetic layout on a web page.

Exercise: Aligning Elements on the Horizontal Axis

In this exercise, you will learn how to use the 

justify-content
property in the Flexbox model to precisely control the distribution of elements on the horizontal axis. Your task will be to create a web page with sections that are distributed in different layouts using the 
justify-content
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 Horizontal Axis</title>
8</head>
9<body>
10  <section class="flex-start">
11    <div>Element 1</div>
12    <div>Element 2</div>
13    <div>Element 3</div>
14  </section>
15  <section class="flex-end">
16    <div>Element 1</div>
17    <div>Element 2</div>
18    <div>Element 3</div>
19  </section>
20  <section class="center">
21    <div>Element 1</div>
22    <div>Element 2</div>
23    <div>Element 3</div>
24  </section>
25  <section class="space-between">
26    <div>Element 1</div>
27    <div>Element 2</div>
28    <div>Element 3</div>
29  </section>
30  <section class="space-around">
31    <div>Element 1</div>
32    <div>Element 2</div>
33    <div>Element 3</div>
34  </section>
35  <section class="space-evenly">
36    <div>Element 1</div>
37    <div>Element 2</div>
38    <div>Element 3</div>
39  </section>
40</body>
41</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: 100px;
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 
justify-content: flex-start

Add a style for the 

.flex-start
class to position elements toward the start.

1/* Layout with justify-content: flex-start */
2.flex-start {
3  justify-content: flex-start;
4}

Step 5: Layout with 
justify-content: flex-end

Add a style for the 

.flex-end
class to position elements toward the end.

1/* Layout with justify-content: flex-end */
2.flex-end {
3  justify-content: flex-end;
4}

Step 6: Layout with 
justify-content: center

Add a style for the 

.center
class to center the elements.

1/* Layout with justify-content: center */
2.center {
3  justify-content: center;
4}

Step 7: Layout with 
justify-content: space-between

Add a style for the 

.space-between
class to evenly distribute elements in the line, with the first element at the start line and the last at the end line.

1/* Layout with justify-content: space-between */
2.space-between {
3  justify-content: space-between;
4}

Step 8: Layout with 
justify-content: space-around

Add a style for the 

.space-around
class to evenly distribute elements in the line with equal space around them.

1/* Layout with justify-content: space-around */
2.space-around {
3  justify-content: space-around;
4}

Step 9: Layout with 
justify-content: space-evenly

Add a style for the 

.space-evenly
class to evenly distribute elements in the line so that spacing between any two elements (and spacing from the edges) is equal.

1/* Layout with justify-content: space-evenly */
2.space-evenly {
3  justify-content: space-evenly;
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 Horizontal Axis</title>
8</head>
9<body>
10  <section class="flex-start">
11    <div>Element 1</div>
12    <div>Element 2</div>
13    <div>Element 3</div>
14  </section>
15  <section class="flex-end">
16    <div>Element 1</div>
17    <div>Element 2</div>
18    <div>Element 3</div>
19  </section>
20  <section class="center">
21    <div>Element 1</div>
22    <div>Element 2</div>
23    <div>Element 3</div>
24  </section>
25  <section class="space-between">
26    <div>Element 1</div>
27    <div>Element 2</div>
28    <div>Element 3</div>
29  </section>
30  <section class="space-around">
31    <div>Element 1</div>
32    <div>Element 2</div>
33    <div>Element 3</div>
34  </section>
35  <section class="space-evenly">
36    <div>Element 1</div>
37    <div>Element 2</div>
38    <div>Element 3</div>
39  </section>
40</body>
41</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: 100px;
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 justify-content: flex-start */
28.flex-start {
29  justify-content: flex-start;
30}
31
32/* Layout with justify-content: flex-end */
33.flex-end {
34  justify-content: flex-end;
35}
36
37/* Layout with justify-content: center */
38.center {
39  justify-content: center;
40}
41
42/* Layout with justify-content: space-between */
43.space-between {
44  justify-content: space-between;
45}
46
47/* Layout with justify-content: space-around */
48.space-around {
49  justify-content: space-around;
50}
51
52/* Layout with justify-content: space-evenly */
53.space-evenly {
54  justify-content: space-evenly;
55}

Experiment Further

  1. Add more sections with different 
    justify-content
    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 

justify-content
property in the Flexbox model to precisely control the distribution of elements on the horizontal axis.

Go to CodeWorlds→