Kurs HTML i CSS · Moduł 4: Flexbox
Dopasowanie elementów w osi poziomej
W tej lekcji11
1section {
2 display: flex;
3 justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right;
4}- Właściwość "flex-start" (domyślna) - elementy są rozmieszczane w kierunku początku.
- Właściwość "flex-end" - elementy są rozmieszczane w kierunku końca.
- Właściwość "start" - elementy są rozmieszczane w kierunku początku zgodnie z writing-mode.
- Właściwość "end" - elementy są rozmieszczane w kierunku końca zgodnie z writing-mode.
- Właściwość "left" - elementy są rozmieszczane w kierunku lewej krawędzi kontenera, chyba że flex-direction nie ma zastosowania, wtedy zachowuje się jak "start".
- Właściwość "right" - elementy są rozmieszczane w kierunku prawej krawędzi kontenera, chyba że flex-direction nie ma zastosowania, wtedy zachowuje się jak "end".
- Właściwość "center" - elementy są wyśrodkowane wzdłuż linii.
- Właściwość "space-between" - elementy są równomiernie rozmieszczone w linii; pierwszy element znajduje się przy linii początkowej, a ostatni element przy linii końcowej.
- Właściwość "space-around" - elementy są równomiernie rozmieszczone w linii, z równą przestrzenią wokół nich. Odstępy między elementami są równe, ale uwaga: odstępy po obu stronach są większe niż odstępy między elementami.
- Właściwość "space-evenly" - elementy są równomiernie rozmieszczone w linii, tak aby odstępy między dowolnymi dwoma elementami (i odstęp od krawędzi) były równe.
Dzięki tym właściwościom możemy precyzyjnie kontrolować rozmieszczenie elementów w kontenerze Flexbox, zapewniając harmonijny i estetyczny układ na stronie internetowej.
Ćwiczenie: Dopasowanie elementów w osi poziomej
W tym ćwiczeniu nauczysz się, jak używać właściwości justify-content w modelu Flexbox, aby precyzyjnie kontrolować rozmieszczenie elementów w osi poziomej. Twoim zadaniem będzie utworzenie strony internetowej z sekcjami, które będą rozmieszczane w różnych układach za pomocą właściwości justify-content.
Krok 1: Stwórz podstawową strukturę dokumentu HTML
Najpierw stwórz nowy plik HTML i dodaj podstawową strukturę dokumentu HTML. Dodaj element <section> z kilkoma elementami <div> w ciele dokumentu (<body>).
1<!DOCTYPE html>
2<html lang="pl">
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"> <!-- Podłącz plik CSS -->
7 <title>Dopasowanie elementów w osi poziomej</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>Krok 2: Stwórz plik CSS
Otwórz lub utwórz nowy plik CSS i zapisz go jako styles.css.
Krok 3: Stylizacja podstawowa
Dodaj podstawowe style dla elementów <section> i <div>, aby były widoczne na stronie.
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}Krok 4: Układ z justify-content: flex-start
Dodaj styl dla klasy .flex-start, aby ustawić elementy w kierunku początku.
1/* Układ z justify-content: flex-start */
2.flex-start {
3 justify-content: flex-start;
4}Krok 5: Układ z justify-content: flex-end
Dodaj styl dla klasy .flex-end, aby ustawić elementy w kierunku końca.
1/* Układ z justify-content: flex-end */
2.flex-end {
3 justify-content: flex-end;
4}Krok 6: Układ z justify-content: center
Dodaj styl dla klasy .center, aby wyśrodkować elementy.
1/* Układ z justify-content: center */
2.center {
3 justify-content: center;
4}Krok 7: Układ z justify-content: space-between
Dodaj styl dla klasy .space-between, aby równomiernie rozmieścić elementy w linii, z pierwszym elementem przy linii początkowej, a ostatnim przy linii końcowej.
1/* Układ z justify-content: space-between */
2.space-between {
3 justify-content: space-between;
4}Krok 8: Układ z justify-content: space-around
Dodaj styl dla klasy .space-around, aby równomiernie rozmieścić elementy w linii, z równą przestrzenią wokół nich.
1/* Układ z justify-content: space-around */
2.space-around {
3 justify-content: space-around;
4}Krok 9: Układ z justify-content: space-evenly
Dodaj styl dla klasy .space-evenly, aby równomiernie rozmieścić elementy w linii, tak aby odstępy między dowolnymi dwoma elementami (i odstęp od krawędzi) były równe.
1/* Układ z justify-content: space-evenly */
2.space-evenly {
3 justify-content: space-evenly;
4}Wynik
Po wykonaniu wszystkich kroków twój plik HTML i CSS powinny wyglądać następująco:
Plik HTML (index.html)
1<!DOCTYPE html>
2<html lang="pl">
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"> <!-- Podłącz plik CSS -->
7 <title>Dopasowanie elementów w osi poziomej</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>Plik CSS (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/* Układ z justify-content: flex-start */
28.flex-start {
29 justify-content: flex-start;
30}
31
32/* Układ z justify-content: flex-end */
33.flex-end {
34 justify-content: flex-end;
35}
36
37/* Układ z justify-content: center */
38.center {
39 justify-content: center;
40}
41
42/* Układ z justify-content: space-between */
43.space-between {
44 justify-content: space-between;
45}
46
47/* Układ z justify-content: space-around */
48.space-around {
49 justify-content: space-around;
50}
51
52/* Układ z justify-content: space-evenly */
53.space-evenly {
54 justify-content: space-evenly;
55}Eksperymentuj dalej
- Dodaj więcej sekcji z różnymi wartościami
justify-content, aby lepiej zrozumieć, jak działają różne opcje. - Spróbuj dodać więcej stylów do swojej strony, np. zmieniając kolory, rozmiary i inne właściwości CSS.
- Przetestuj swoje umiejętności, tworząc bardziej złożone układy z użyciem różnych kombinacji właściwości Flexbox.
Po wykonaniu tego ćwiczenia powinieneś lepiej rozumieć, jak używać właściwości justify-content w modelu Flexbox, aby precyzyjnie kontrolować rozmieszczenie elementów w osi poziomej.
Kod do tej lekcji: index.html
1<!DOCTYPE html>
2<html lang="pl">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Transform i 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 (Przesunięcie)</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 (Skalowanie)</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 (Obrót)</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 (Pochylenie)</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>Kombinowane transformacje</h2>
47 <div class="transform-demo">
48 <div class="box combined">Hover - Kombinacja</div>
49 <div class="box flip-card">
50 <div class="flip-inner">
51 <div class="flip-front">Przód</div>
52 <div class="flip-back">Tył</div>
53 </div>
54 </div>
55 </div>
56 </section>
57
58 <section class="demo-section">
59 <h2>Transition - Różne funkcje czasowe</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 - Różne właściwości</h2>
69 <div class="transition-demo">
70 <div class="box transition-color">Kolor</div>
71 <div class="box transition-size">Rozmiar</div>
72 <div class="box transition-multiple">Wiele właściwości</div>
73 </div>
74 </section>
75
76 <section class="demo-section">
77 <h2>Praktyczne przykłady</h2>
78
79 <div class="practical-examples">
80 <div class="button-effects">
81 <h3>Przyciski z efektami</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>Karty z animacjami</h3>
89 <div class="card-grid">
90 <div class="animated-card lift">
91 <h4>Lift Effect</h4>
92 <p>Najedź myszką</p>
93 </div>
94 <div class="animated-card tilt">
95 <h4>Tilt Effect</h4>
96 <p>Najedź myszką</p>
97 </div>
98 <div class="animated-card zoom">
99 <h4>Zoom Effect</h4>
100 <p>Najedź myszką</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>Widzisz błąd w tej lekcji?
Sprawdź się
Odpowiedz na pytania z tej lekcji. Wybierz odpowiedź, a od razu zobaczysz, czy jest poprawna.
1. Która wartość justify-content wyśrodkowuje elementy wzdłuż osi głównej?
2. Która wartość justify-content rozmieszcza elementy równomiernie, z pierwszym i ostatnim elementem przy krawędziach kontenera?