Dopasowanie elementów w osi pionowej i poziomej

1. Oś Główna (Main Axis)

Oś główna jest główną osią, wzdłuż której przedmioty flex są układane w kontenerze flex. Kierunek tej osi jest kontrolowany przez właściwość flex-direction.

• flex-direction: row: Oś główna biegnie w poziomie od lewej do prawej (dla języków pisanych od lewej do prawej). Jest to domyślny kierunek.

• flex-direction: column: Oś główna biegnie w pionie od góry do dołu.

Właściwość justify-content jest używana do zarządzania układem przedmiotów wzdłuż osi głównej.

2. Oś Poprzeczna (Cross Axis)

Oś poprzeczna biegnie prostopadle do osi głównej. Jeśli oś główna jest pozioma, oś poprzeczna będzie pionowa i odwrotnie.

Właściwość align-items jest używana do zarządzania układem przedmiotów wzdłuż osi poprzecznej.

Przykłady i zastosowanie

Oś Pozioma (Row):

css .container { display: flex; flex-direction: row; // oś główna jest pozioma justify-content: center; // wyśrodkowuje przedmioty wzdłuż osi głównej align-items: flex-start; // wyrównuje przedmioty do górnej części osi poprzecznej }

Oś Pionowa (Column):

css .container { display: flex; flex-direction: column; // oś główna jest pionowa justify-content: space-around; // rozdziela przedmioty równomiernie wzdłuż osi głównej align-items: flex-end; // wyrównuje przedmioty do prawej części osi poprzecznej }

Podsumowanie

Rozumienie osi pionowej i poziomej w Flexbox jest kluczowe do kontroli układu elementów na stronie.

Ćwiczenie: Dopasowanie elementów w osi pionowej i poziomej

W tym ćwiczeniu nauczysz się, jak używać właściwości flex-direction, justify-content i align-items w modelu Flexbox, aby precyzyjnie kontrolować układ elementów w kontenerze Flexbox zarówno w osi pionowej, jak i poziomej. Twoim zadaniem będzie utworzenie strony internetowej z kontenerami, które będą rozmieszczane w różnych układach za pomocą tych właściwości.

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 pionowej i poziomej</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>

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
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}

Krok 4: Układ z row, justify-content: center i align-items: flex-start

Dodaj styl dla klasy .row-center-start, aby ustawić elementy w poziomie, wyśrodkowane wzdłuż osi głównej i wyrównane do początku osi poprzecznej.

1/* Układ z row, justify-content: center i align-items: flex-start */
2.row-center-start {
3  flex-direction: row;
4  justify-content: center;
5  align-items: flex-start;
6}

Krok 5: Układ z column, justify-content: space-around i align-items: flex-end

Dodaj styl dla klasy .column-around-end, aby ustawić elementy w pionie, równomiernie rozmieszczone wzdłuż osi głównej i wyrównane do końca osi poprzecznej.

1/* Układ z column, justify-content: space-around i align-items: flex-end */
2.column-around-end {
3  flex-direction: column;
4  justify-content: space-around;
5  align-items: flex-end;
6}

Krok 6: Układ z row, justify-content: space-between i align-items: center

Dodaj styl dla klasy .row-space-between-center, aby ustawić elementy w poziomie, rozmieszczone równomiernie z odstępami między nimi wzdłuż osi głównej i wyśrodkowane w osi poprzecznej.

1/* Układ z row, justify-content: space-between i align-items: center */
2.row-space-between-center {
3  flex-direction: row;
4  justify-content: space-between;
5  align-items: center;
6}

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 pionowej i poziomej</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>

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
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/* Układ z row, justify-content: center i align-items: flex-start */
28.row-center-start {
29  flex-direction: row;
30  justify-content: center;
31  align-items: flex-start;
32}
33
34/* Układ z column, justify-content: space-around i 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/* Układ z row, justify-content: space-between i align-items: center */
42.row-space-between-center {
43  flex-direction: row;
44  justify-content: space-between;
45  align-items: center;
46}

Zadanie dodatkowe

1. Stwórz dodatkową sekcję z własnym układem, używając różnych kombinacji właściwości flex-direction, justify-content i align-items.
2. Dodaj style, aby zmienić kolory tła, marginesy lub inne właściwości elementów, aby lepiej zrozumieć, jak działają różne opcje.
3. 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 flex-direction, justify-content i align-items w modelu Flexbox, aby precyzyjnie kontrolować układ elementów w kontenerze.

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>Flexbox - Align Items</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="container">
11        <h1>Align Items - Wyrównywanie po osi krzyżowej</h1>
12        <p class="subtitle">Kontroluj położenie elementów wzdłuż osi krzyżowej</p>
13
14        <section class="demo-section">
15            <h2>align-items: stretch (domyślnie)</h2>
16            <div class="flex-container align-stretch">
17                <div class="flex-item">Element 1</div>
18                <div class="flex-item">Element 2<br>Dwie linie</div>
19                <div class="flex-item">Element 3</div>
20            </div>
21            <p class="description">Elementy rozciągają się aby wypełnić kontener</p>
22        </section>
23
24        <section class="demo-section">
25            <h2>align-items: flex-start</h2>
26            <div class="flex-container align-start">
27                <div class="flex-item">Element 1</div>
28                <div class="flex-item tall">Element 2<br>Wyższy<br>Element</div>
29                <div class="flex-item">Element 3</div>
30            </div>
31            <p class="description">Elementy wyrównane do górnej krawędzi kontenera</p>
32        </section>
33
34        <section class="demo-section">
35            <h2>align-items: flex-end</h2>
36            <div class="flex-container align-end">
37                <div class="flex-item">Element 1</div>
38                <div class="flex-item tall">Element 2<br>Wyższy<br>Element</div>
39                <div class="flex-item">Element 3</div>
40            </div>
41            <p class="description">Elementy wyrównane do dolnej krawędzi kontenera</p>
42        </section>
43
44        <section class="demo-section">
45            <h2>align-items: center</h2>
46            <div class="flex-container align-center">
47                <div class="flex-item">Element 1</div>
48                <div class="flex-item tall">Element 2<br>Wyższy<br>Element</div>
49                <div class="flex-item">Element 3</div>
50            </div>
51            <p class="description">Elementy wycentrowane wzdłuż osi krzyżowej</p>
52        </section>
53
54        <section class="demo-section">
55            <h2>align-items: baseline</h2>
56            <div class="flex-container align-baseline">
57                <div class="flex-item small">Mały</div>
58                <div class="flex-item medium">Średni</div>
59                <div class="flex-item large">Duży</div>
60            </div>
61            <p class="description">Elementy wyrównane po linii bazowej tekstu</p>
62        </section>
63
64        <section class="demo-section practice">
65            <h2>Praktyka: Egipska galeria</h2>
66            <div class="gallery">
67                <div class="gallery-item">
68                    <div class="icon">◆</div>
69                    <div class="title">Waza</div>
70                </div>
71                <div class="gallery-item">
72                    <div class="icon large-icon">▲</div>
73                    <div class="title">Korona<br>Faraona</div>
74                </div>
75                <div class="gallery-item">
76                    <div class="icon">◆</div>
77                    <div class="title">Papirus</div>
78                </div>
79            </div>
80        </section>
81    </div>
82</body>
83</html>