Używamy cookies, żeby zwiększyć Twoje doświadczenia na stronie
Polityka Prywatności
OK
CodeWorlds

Tworzenie Siatki za pomocą Flexbox

Starożytni Egipcjanie byli mistrzami planowania przestrzeni - od symetrycznych kolumn w świątyniach po precyzyjne podziały pól uprawnych wzdłuż Nilu. Tworzenie siatki (grid) za pomocą Flexbox to nowoczesny odpowiednik tej umiejętności. Przeanalizujemy krok po kroku, jak zbudować responsywny układ siatki z elastycznymi kolumnami o szerokościach określonych w procentach, podobnie do frameworków Bootstrap czy Tailwind CSS.

Krok 1: Stwórz podstawową strukturę dokumentu HTML

Najpierw stwórz nowy plik HTML i dodaj podstawową strukturę dokumentu HTML. Dodaj element 

<div>
z klasą 
.flex-grid
i kilka elementów 
<div>
z klasą 
.col
, które będą reprezentować kolumny w siatce.

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>Tworzenie Siatki za pomocą Flexbox</title>
8</head>
9<body>
10  <div class="flex-grid">
11    <div class="col col-6">Kolumna 1</div>
12    <div class="col col-6">Kolumna 2</div>
13  </div>
14  <div class="flex-grid">
15    <div class="col col-4">Kolumna 1</div>
16    <div class="col col-4">Kolumna 2</div>
17    <div class="col col-4">Kolumna 3</div>
18  </div>
19  <div class="flex-grid">
20    <div class="col col-3">Kolumna 1</div>
21    <div class="col col-3">Kolumna 2</div>
22    <div class="col col-3">Kolumna 3</div>
23    <div class="col col-3">Kolumna 4</div>
24  </div>
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 

.flex-grid
i 
.col
, aby były widoczne na stronie.

1body {
2  font-family: Arial, sans-serif;
3  margin: 0;
4  padding: 0;
5  display: flex;
6  justify-content: center;
7  align-items: center;
8  flex-direction: column;
9  gap: 20px;
10  min-height: 100vh;
11  background-color: #f0f0f0;
12}
13
14.flex-grid {
15  display: flex;
16  flex-wrap: wrap;
17  width: 80%;
18  background-color: #fff;
19  border: 1px solid #ddd;
20  padding: 10px;
21  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
22  gap: 10px;
23}
24
25.col {
26  background-color: lightblue;
27  padding: 20px;
28  text-align: center;
29  border: 1px solid #ccc;
30}

Krok 4: Tworzenie klas kolumn z wartościami procentowymi

Dodaj style dla klas 

.col-1
, 
.col-2
, 
.col-3
, 
.col-4
, 
.col-5
, 
.col-6
, które określą szerokość kolumn w procentach.

1.col-1 {
2  flex-basis: 8.33333333%;
3  max-width: 8.33333333%;
4}
5
6.col-2 {
7  flex-basis: 16.66666667%;
8  max-width: 16.66666667%;
9}
10
11.col-3 {
12  flex-basis: 25%;
13  max-width: 25%;
14}
15
16.col-4 {
17  flex-basis: 33.33333333%;
18  max-width: 33.33333333%;
19}
20
21.col-5 {
22  flex-basis: 41.66666667%;
23  max-width: 41.66666667%;
24}
25
26.col-6 {
27  flex-basis: 50%;
28  max-width: 50%;
29}
30
31.col-7 {
32  flex-basis: 58.33333333%;
33  max-width: 58.33333333%;
34}
35
36.col-8 {
37  flex-basis: 66.66666667%;
38  max-width: 66.66666667%;
39}
40
41.col-9 {
42  flex-basis: 75%;
43  max-width: 75%;
44}
45
46.col-10 {
47  flex-basis: 83.33333333%;
48  max-width: 83.33333333%;
49}
50
51.col-11 {
52  flex-basis: 91.66666667%;
53  max-width: 91.66666667%;
54}
55
56.col-12 {
57  flex-basis: 100%;
58  max-width: 100%;
59}

Krok 5: Responsywne kolumny

Aby siatka była responsywna, możemy użyć media queries i zmieniać właściwości Flexbox w zależności od szerokości ekranu.

1@media (max-width: 768px) {
2  .flex-grid {
3    flex-direction: column;
4  }
5
6  .col {
7    flex: none;
8    width: 100%;
9  }
10}

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>Tworzenie Siatki za pomocą Flexbox</title>
8</head>
9<body>
10  <div class="flex-grid">
11    <div class="col col-6">Kolumna 1</div>
12    <div class="col col-6">Kolumna 2</div>
13  </div>
14  <div class="flex-grid">
15    <div class="col col-4">Kolumna 1</div>
16    <div class="col col-4">Kolumna 2</div>
17    <div class="col col-4">Kolumna 3</div>
18  </div>
19  <div class="flex-grid">
20    <div class="col col-3">Kolumna 1</div>
21    <div class="col col-3">Kolumna 2</div>
22    <div class="col col-3">Kolumna 3</div>
23    <div class="col col-3">Kolumna 4</div>
24  </div>
25</body>
26</html>

Plik CSS (styles.css)

1body {
2  font-family: Arial, sans-serif;
3  margin: 0;
4  padding: 0;
5  display: flex;
6  justify-content: center;
7  align-items: center;
8  flex-direction: column;
9  gap: 20px;
10  min-height: 100vh;
11  background-color: #f0f0f0;
12}
13
14.flex-grid {
15  display: flex;
16  flex-wrap: wrap;
17  width: 80%;
18  background-color: #fff;
19  border: 1px solid #ddd;
20  padding: 10px;
21  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
22  gap: 10px;
23}
24
25.col {
26  background-color: lightblue;
27  padding: 20px;
28  text-align: center;
29  border: 1px solid #ccc;
30}
31
32.col-1 {
33  flex-basis: 8.33333333%;
34  max-width: 8.33333333%;
35}
36
37.col-2 {
38  flex-basis: 16.66666667%;
39  max-width: 16.66666667%;
40}
41
42.col-3 {
43  flex-basis: 25%;
44  max-width: 25%;
45}
46
47.col-4 {
48  flex-basis: 33.33333333%;
49  max-width: 33.33333333%;
50}
51
52.col-5 {
53  flex-basis: 41.66666667%;
54  max-width: 41.66666667%;
55}
56
57.col-6 {
58  flex-basis: 50%;
59  max-width: 50%;
60}
61
62.col-7 {
63  flex-basis: 58.33333333%;
64  max-width: 58.33333333%;
65}
66
67.col-8 {
68  flex-basis: 66.66666667%;
69  max-width: 66.66666667%;
70}
71
72.col-9 {
73  flex-basis: 75%;
74  max-width: 75%;
75}
76
77.col-10 {
78  flex-basis: 83.33333333%;
79  max-width: 83.33333333%;
80}
81
82.col-11 {
83  flex-basis: 91.66666667%;
84  max-width: 91.66666667%;
85}
86
87.col-12 {
88  flex-basis: 100%;
89  max-width: 100%;
90}
91
92@media (max-width: 768px) {
93  .flex-grid {
94    flex-direction: column;
95  }
96
97  .col {
98    flex: none;
99    width: 100%;
100  }
101}

Zadanie dodatkowe

  1. Dodaj więcej kolumn i eksperymentuj z różnymi wartościami 
    flex-basis
    i 
    max-width
    , aby zobaczyć, jak zmienia się układ siatki.
  2. Przetestuj swoje umiejętności, tworząc bardziej złożone układy z użyciem różnych kombinacji właściwości Flexbox.
  3. Dodaj różne style do swojej siatki, np. zmieniając kolory, rozmiary czcionek i inne właściwości elementów, aby lepiej zrozumieć, jak działają różne opcje Flexboxa.

Wypróbuj tworzenie siatki Flexbox w edytorze poniżej:

Przejdź do CodeWorlds→