Oś pionowa czy pozioma?

1section {
2  display: flex;
3  flex-direction: row | row-reverse | column | column-reverse;
4}

Przykład powyżej ilustruje możliwość określenia kierunku, w jakim elementy są rozmieszczane w elastycznym kontenerze. Dla modelu Flexboxa istnieją cztery główne opcje układu:

• row (domyślnie) - elementy są ustawiane w linii poziomej od lewej do prawej strony.
• row-reverse - elementy są ustawiane w linii poziomej od prawej do lewej strony.
• column - elementy są ustawiane w linii pionowej od góry do dołu.
• column-reverse - elementy są ustawiane w linii pionowej od dołu do góry.

Dzięki tym opcjom możemy kontrolować kierunek rozmieszczenia elementów wewnątrz kontenera Flexboxa, co pozwala na elastyczne dostosowanie układu strony do naszych potrzeb.

Ćwiczenie: Układ w modelu Flexbox

W tym ćwiczeniu nauczysz się, jak używać właściwości flex-direction w modelu Flexbox, aby kontrolować kierunek rozmieszczenia elementów w elastycznym kontenerze. Twoim zadaniem będzie utworzenie strony internetowej z sekcjami, które będą rozmieszczane w różnych kierunkach za pomocą właściwości flex-direction.

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>Układ w modelu Flexbox</title>
8</head>
9<body>
10  <section class="flex-row">
11    <div>Element 1</div>
12    <div>Element 2</div>
13    <div>Element 3</div>
14  </section>
15  <section class="flex-row-reverse">
16    <div>Element 1</div>
17    <div>Element 2</div>
18    <div>Element 3</div>
19  </section>
20  <section class="flex-column">
21    <div>Element 1</div>
22    <div>Element 2</div>
23    <div>Element 3</div>
24  </section>
25  <section class="flex-column-reverse">
26    <div>Element 1</div>
27    <div>Element 2</div>
28    <div>Element 3</div>
29  </section>
30</body>
31</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-wrap: wrap;
4  gap: 20px;
5  margin: 0;
6  padding: 20px;
7  justify-content: space-around;
8}
9
10section {
11  display: flex;
12  border: 1px solid #000;
13  padding: 10px;
14  width: 45%;
15  height: 200px;
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 w linii poziomej (row)

Dodaj styl dla klasy .flex-row, aby ustawić elementy w linii poziomej od lewej do prawej strony.

1/* Układ w linii poziomej (row) */
2.flex-row {
3  flex-direction: row;
4}

Krok 5: Układ w linii poziomej odwrócony (row-reverse)

Dodaj styl dla klasy .flex-row-reverse, aby ustawić elementy w linii poziomej od prawej do lewej strony.

1/* Układ w linii poziomej odwrócony (row-reverse) */
2.flex-row-reverse {
3  flex-direction: row-reverse;
4}

Krok 6: Układ w linii pionowej (column)

Dodaj styl dla klasy .flex-column, aby ustawić elementy w linii pionowej od góry do dołu.

1/* Układ w linii pionowej (column) */
2.flex-column {
3  flex-direction: column;
4}

Krok 7: Układ w linii pionowej odwrócony (column-reverse)

Dodaj styl dla klasy .flex-column-reverse, aby ustawić elementy w linii pionowej od dołu do góry.

1/* Układ w linii pionowej odwrócony (column-reverse) */
2.flex-column-reverse {
3  flex-direction: column-reverse;
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>Układ w modelu Flexbox</title>
8</head>
9<body>
10  <section class="flex-row">
11    <div>Element 1</div>
12    <div>Element 2</div>
13    <div>Element 3</div>
14  </section>
15  <section class="flex-row-reverse">
16    <div>Element 1</div>
17    <div>Element 2</div>
18    <div>Element 3</div>
19  </section>
20  <section class="flex-column">
21    <div>Element 1</div>
22    <div>Element 2</div>
23    <div>Element 3</div>
24  </section>
25  <section class="flex-column-reverse">
26    <div>Element 1</div>
27    <div>Element 2</div>
28    <div>Element 3</div>
29  </section>
30</body>
31</html>

Plik CSS (styles.css)

1body {
2  display: flex;
3  flex-wrap: wrap;
4  gap: 20px;
5  margin: 0;
6  padding: 20px;
7  justify-content: space-around;
8}
9
10section {
11  display: flex;
12  border: 1px solid #000;
13  padding: 10px;
14  width: 45%;
15  height: 200px;
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 w linii poziomej (row) */
28.flex-row {
29  flex-direction: row;
30}
31
32/* Układ w linii poziomej odwrócony (row-reverse) */
33.flex-row-reverse {
34  flex-direction: row-reverse;
35}
36
37/* Układ w linii pionowej (column) */
38.flex-column {
39  flex-direction: column;
40}
41
42/* Układ w linii pionowej odwrócony (column-reverse) */
43.flex-column-reverse {
44  flex-direction: column-reverse;
45}

Eksperymentuj dalej

1. Dodaj więcej sekcji z różnymi układami, aby lepiej zrozumieć, jak działają różne opcje flex-direction.
2. Spróbuj dodać więcej stylów do swojej strony, np. zmieniając kolory, rozmiary i inne właściwości CSS.
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 w modelu Flexbox, aby kontrolować kierunek rozmieszczenia elementów w elastycznym 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 - Elastyczne układy</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="container">
11        <h1>Flexbox - Przewodnik po elastycznych układach</h1>
12
13        <section class="demo-section">
14            <h2>Flex Direction - Row (domyślnie)</h2>
15            <div class="flex-container flex-row">
16                <div class="flex-item">Element 1</div>
17                <div class="flex-item">Element 2</div>
18                <div class="flex-item">Element 3</div>
19            </div>
20        </section>
21
22        <section class="demo-section">
23            <h2>Flex Direction - Row Reverse</h2>
24            <div class="flex-container flex-row-reverse">
25                <div class="flex-item">Element 1</div>
26                <div class="flex-item">Element 2</div>
27                <div class="flex-item">Element 3</div>
28            </div>
29        </section>
30
31        <section class="demo-section">
32            <h2>Flex Direction - Column</h2>
33            <div class="flex-container flex-column">
34                <div class="flex-item">Element 1</div>
35                <div class="flex-item">Element 2</div>
36                <div class="flex-item">Element 3</div>
37            </div>
38        </section>
39
40        <section class="demo-section">
41            <h2>Justify Content - Space Between</h2>
42            <div class="flex-container justify-space-between">
43                <div class="flex-item">Start</div>
44                <div class="flex-item">Middle</div>
45                <div class="flex-item">End</div>
46            </div>
47        </section>
48
49        <section class="demo-section">
50            <h2>Justify Content - Center</h2>
51            <div class="flex-container justify-center">
52                <div class="flex-item">Centrum</div>
53                <div class="flex-item">Strony</div>
54            </div>
55        </section>
56
57        <section class="demo-section">
58            <h2>Align Items - Center</h2>
59            <div class="flex-container align-center">
60                <div class="flex-item">Wysokość 1</div>
61                <div class="flex-item tall">Wysokość 2<br>Druga linia</div>
62                <div class="flex-item">Wysokość 3</div>
63            </div>
64        </section>
65
66        <section class="demo-section">
67            <h2>Flex Grow i Shrink</h2>
68            <div class="flex-container">
69                <div class="flex-item flex-grow-1">Flex-grow: 1</div>
70                <div class="flex-item flex-grow-2">Flex-grow: 2</div>
71                <div class="flex-item">Domyślny</div>
72            </div>
73        </section>
74
75        <section class="demo-section">
76            <h2>Flex Wrap</h2>
77            <div class="flex-container flex-wrap">
78                <div class="flex-item wide">Szeroki 1</div>
79                <div class="flex-item wide">Szeroki 2</div>
80                <div class="flex-item wide">Szeroki 3</div>
81                <div class="flex-item wide">Szeroki 4</div>
82                <div class="flex-item wide">Szeroki 5</div>
83            </div>
84        </section>
85
86        <section class="demo-section">
87            <h2>Praktyczny przykład - Navigation Bar</h2>
88            <nav class="navbar">
89                <div class="nav-brand">Logo</div>
90                <div class="nav-links">
91                    <a href="#">Home</a>
92                    <a href="#">About</a>
93                    <a href="#">Services</a>
94                    <a href="#">Contact</a>
95                </div>
96                <div class="nav-auth">
97                    <button>Login</button>
98                </div>
99            </nav>
100        </section>
101
102        <section class="demo-section">
103            <h2>Praktyczny przykład - Card Layout</h2>
104            <div class="card-container">
105                <div class="card">
106                    <div class="card-header">Karta 1</div>
107                    <div class="card-body">Zawartość pierwszej karty z elastycznym layoutem.</div>
108                    <div class="card-footer">
109                        <button>Action</button>
110                    </div>
111                </div>
112                <div class="card">
113                    <div class="card-header">Karta 2</div>
114                    <div class="card-body">Druga karta z dłuższą zawartością, która pokazuje jak flexbox automatycznie dostosowuje wysokość elementów.</div>
115                    <div class="card-footer">
116                        <button>Action</button>
117                    </div>
118                </div>
119                <div class="card">
120                    <div class="card-header">Karta 3</div>
121                    <div class="card-body">Trzecia karta.</div>
122                    <div class="card-footer">
123                        <button>Action</button>
124                    </div>
125                </div>
126            </div>
127        </section>
128    </div>
129</body>
130</html>