Usamos cookies para mejorar tu experiencia en el sitio
Política de Privacidad
Aceptar
CodeWorlds

Zawijanie elementów - flex-wrap

Wyobraź sobie procesję kapłanów w starożytnej świątyni egipskiej. Jeśli korytarz jest wystarczająco szeroki, wszyscy kapłani idą w jednym rzędzie. Ale gdy korytarz się zwęża, część z nich musi przejść do następnego rzędu. Dokładnie tak działa właściwość 

flex-wrap
w CSS Flexbox!

Domyślnie wszystkie elementy z działającą na rodzica deklaracją 

display: flex;
będą próbowały zmieścić się w jednej linii. Możesz to zmienić i zezwolić elementom na zawijanie elementów do następnych linii.

1section {
2  display: flex;
3  flex-wrap: nowrap | wrap | wrap-reverse;
4}

W przypadku modelu Flexboxa, mamy również możliwość kontrolowania zachowania zawijania elementów, gdy nie mieszczą się w jednym wierszu. Oto trzy opcje dotyczące zawijania:

  • Opcja "nowrap" (domyślna) - wszystkie elementy będą trzymane w jednym wierszu, bez zawijania. Elementy będą próbowały zmieścić się w dostępnej przestrzeni, bez tworzenia nowych linii.

  • Opcja "wrap" - elementy będą zawijane w nowe linie, od góry do dołu. Gdy elementy nie mieszczą się w bieżącym wierszu, zostaną przeniesione do kolejnej linii, tworząc układ wieloliniowy.

  • Opcja "wrap-reverse" - elementy będą zawijane w nowe linie, ale w odwrotnej kolejności, czyli od dołu do góry. Elementy, które nie mieszczą się w bieżącej linii, będą przenoszone do poprzedniej linii.

Dzięki tym opcjom możemy elastycznie kontrolować układ elementów w kontenerze Flexboxa, uwzględniając ich zawijanie na nowe linie, co pozwala na odpowiednie dopasowanie układu do dostępnej przestrzeni.

Ćwiczenie: Zawijanie elementów

W tym ćwiczeniu nauczysz się, jak używać właściwości 

flex-wrap
w modelu Flexbox, aby kontrolować zawijanie elementów, gdy nie mieszczą się one w jednym wierszu. Twoim zadaniem będzie utworzenie strony internetowej z kontenerami, które będą rozmieszczane w różnych układach za pomocą tej 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>Zawijanie elementów</title>
8</head>
9<body>
10  <section class="container nowrap">
11    <div>Element 1</div>
12    <div>Element 2</div>
13    <div>Element 3</div>
14    <div>Element 4</div>
15    <div>Element 5</div>
16    <div>Element 6</div>
17    <div>Element 7</div>
18    <div>Element 8</div>
19  </section>
20  <section class="container wrap">
21    <div>Element 1</div>
22    <div>Element 2</div>
23    <div>Element 3</div>
24    <div>Element 4</div>
25    <div>Element 5</div>
26    <div>Element 6</div>
27    <div>Element 7</div>
28    <div>Element 8</div>
29  </section>
30  <section class="container wrap-reverse">
31    <div>Element 1</div>
32    <div>Element 2</div>
33    <div>Element 3</div>
34    <div>Element 4</div>
35    <div>Element 5</div>
36    <div>Element 6</div>
37    <div>Element 7</div>
38    <div>Element 8</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
10.container {
11  display: flex;
12  border: 1px solid #000;
13  padding: 10px;
14  width: 80%;
15  height: auto;
16  margin: 10px 0;
17  flex-wrap: nowrap; /* Domyślna wartość */
18}
19
20.container div {
21  background-color: lightblue;
22  margin: 5px;
23  padding: 20px;
24  text-align: center;
25  flex: 1 1 30%;
26}

Krok 4: Układ z 
flex-wrap: nowrap

Dodaj styl dla klasy 

.nowrap
, aby ustawić elementy w jednym wierszu, bez zawijania.

1/* Układ z flex-wrap: nowrap */
2.nowrap {
3  flex-wrap: nowrap;
4}

Krok 5: Układ z 
flex-wrap: wrap

Dodaj styl dla klasy 

.wrap
, aby zawijać elementy w nowe linie, gdy nie mieszczą się w jednym wierszu.

1/* Układ z flex-wrap: wrap */
2.wrap {
3  flex-wrap: wrap;
4}

Krok 6: Układ z 
flex-wrap: wrap-reverse

Dodaj styl dla klasy 

.wrap-reverse
, aby zawijać elementy w nowe linie w odwrotnej kolejności, czyli od dołu do góry.

1/* Układ z flex-wrap: wrap-reverse */
2.wrap-reverse {
3  flex-wrap: wrap-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>Zawijanie elementów</title>
8</head>
9<body>
10  <section class="container nowrap">
11    <div>Element 1</div>
12    <div>Element 2</div>
13    <div>Element 3</div>
14    <div>Element 4</div>
15    <div>Element 5</div>
16    <div>Element 6</div>
17    <div>Element 7</div>
18    <div>Element 8</div>
19  </section>
20  <section class="container wrap">
21    <div>Element 1</div>
22    <div>Element 2</div>
23    <div>Element 3</div>
24    <div>Element 4</div>
25    <div>Element 5</div>
26    <div>Element 6</div>
27    <div>Element 7</div>
28    <div>Element 8</div>
29  </section>
30  <section class="container wrap-reverse">
31    <div>Element 1</div>
32    <div>Element 2</div>
33    <div>Element 3</div>
34    <div>Element 4</div>
35    <div>Element 5</div>
36    <div>Element 6</div>
37    <div>Element 7</div>
38    <div>Element 8</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
10.container {
11  display: flex;
12  border: 1px solid #000;
13  padding: 10px;
14  width: 80%;
15  height: auto;
16  margin: 10px 0;
17  flex-wrap: nowrap; /* Domyślna wartość */
18}
19
20.container div {
21  background-color: lightblue;
22  margin: 5px;
23  padding: 20px;
24  text-align: center;
25  flex: 1 1 30%;
26}
27
28/* Układ z flex-wrap: nowrap */
29.nowrap {
30  flex-wrap: nowrap;
31}
32
33/* Układ z flex-wrap: wrap */
34.wrap {
35  flex-wrap: wrap;
36}
37
38/* Układ z flex-wrap: wrap-reverse */
39.wrap-reverse {
40  flex-wrap: wrap-reverse;
41}

Zadanie dodatkowe

  1. Dodaj więcej sekcji z różnymi wartościami 
    flex-wrap
    , aby lepiej zrozumieć, jak działają różne opcje.
  2. Spróbuj dodać więcej stylów do swojej strony, np. zmieniając kolory, rozmiary i 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-wrap
w modelu Flexbox, aby kontrolować zawijanie elementów, gdy nie mieszczą się one w jednym wierszu.

Pamiętaj: 

flex-wrap
to jak planowanie procesji w egipskiej świątyni - decydujesz, czy uczestnicy mają się tłoczyć w jednym rzędzie, czy mogą elegancko przejść do kolejnych!

Ir a CodeWorlds→