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.

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>CSS Transform and Transition</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="container">
11        <h1>CSS Transform & Transition</h1>
12
13        <section class="demo-section">
14            <h2>Transform - Translate (Movement)</h2>
15            <div class="transform-demo">
16                <div class="box translate">Hover - Translate</div>
17                <div class="box translate-3d">Hover - Translate 3D</div>
18            </div>
19        </section>
20
21        <section class="demo-section">
22            <h2>Transform - Scale (Scaling)</h2>
23            <div class="transform-demo">
24                <div class="box scale">Hover - Scale</div>
25                <div class="box scale-axis">Hover - Scale X/Y</div>
26            </div>
27        </section>
28
29        <section class="demo-section">
30            <h2>Transform - Rotate (Rotation)</h2>
31            <div class="transform-demo">
32                <div class="box rotate">Hover - Rotate</div>
33                <div class="box rotate-3d">Hover - Rotate 3D</div>
34            </div>
35        </section>
36
37        <section class="demo-section">
38            <h2>Transform - Skew (Slant)</h2>
39            <div class="transform-demo">
40                <div class="box skew">Hover - Skew</div>
41                <div class="box skew-axis">Hover - Skew X/Y</div>
42            </div>
43        </section>
44
45        <section class="demo-section">
46            <h2>Combined transformations</h2>
47            <div class="transform-demo">
48                <div class="box combined">Hover - Combination</div>
49                <div class="box flip-card">
50                    <div class="flip-inner">
51                        <div class="flip-front">Front</div>
52                        <div class="flip-back">Back</div>
53                    </div>
54                </div>
55            </div>
56        </section>
57
58        <section class="demo-section">
59            <h2>Transition - Different Timing Functions</h2>
60            <div class="transition-demo">
61                <div class="box transition-linear">Linear</div>
62                <div class="box transition-ease">Ease</div>
63                <div class="box transition-bounce">Cubic-bezier</div>
64            </div>
65        </section>
66
67        <section class="demo-section">
68            <h2>Transition - Different Properties</h2>
69            <div class="transition-demo">
70                <div class="box transition-color">Color</div>
71                <div class="box transition-size">Size</div>
72                <div class="box transition-multiple">Multiple properties</div>
73            </div>
74        </section>
75
76        <section class="demo-section">
77            <h2>Practical examples</h2>
78
79            <div class="practical-examples">
80                <div class="button-effects">
81                    <h3>Buttons with effects</h3>
82                    <button class="btn btn-hover">Hover Effect</button>
83                    <button class="btn btn-press">Press Effect</button>
84                    <button class="btn btn-slide">Slide Effect</button>
85                </div>
86
87                <div class="card-effects">
88                    <h3>Cards with animations</h3>
89                    <div class="card-grid">
90                        <div class="animated-card lift">
91                            <h4>Lift Effect</h4>
92                            <p>Hover with mouse</p>
93                        </div>
94                        <div class="animated-card tilt">
95                            <h4>Tilt Effect</h4>
96                            <p>Hover with mouse</p>
97                        </div>
98                        <div class="animated-card zoom">
99                            <h4>Zoom Effect</h4>
100                            <p>Hover with mouse</p>
101                        </div>
102                    </div>
103                </div>
104
105                <div class="loading-spinner">
106                    <h3>Loading Spinner</h3>
107                    <div class="spinner"></div>
108                </div>
109            </div>
110        </section>
111    </div>
112</body>
113</html>