CodeWorlds

Kurs HTML i CSS · Moduł 4: Flexbox

Zawijanie elementów - flex-wrap

5 min czytania ·
W tej lekcji8

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.

section {
  display: flex;
  flex-wrap: nowrap | wrap | wrap-reverse;
}

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>).

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"> <!-- Podłącz plik CSS -->
  <title>Zawijanie elementów</title>
</head>
<body>
  <section class="container nowrap">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
    <div>Element 7</div>
    <div>Element 8</div>
  </section>
  <section class="container wrap">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
    <div>Element 7</div>
    <div>Element 8</div>
  </section>
  <section class="container wrap-reverse">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
    <div>Element 7</div>
    <div>Element 8</div>
  </section>
</body>
</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.

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 20px;
}

.container {
  display: flex;
  border: 1px solid #000;
  padding: 10px;
  width: 80%;
  height: auto;
  margin: 10px 0;
  flex-wrap: nowrap; /* Domyślna wartość */
}

.container div {
  background-color: lightblue;
  margin: 5px;
  padding: 20px;
  text-align: center;
  flex: 1 1 30%;
}

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

Dodaj styl dla klasy .nowrap, aby ustawić elementy w jednym wierszu, bez zawijania.

/* Układ z flex-wrap: nowrap */
.nowrap {
  flex-wrap: nowrap;
}

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.

/* Układ z flex-wrap: wrap */
.wrap {
  flex-wrap: wrap;
}

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.

/* Układ z flex-wrap: wrap-reverse */
.wrap-reverse {
  flex-wrap: wrap-reverse;
}

Wynik

Po wykonaniu wszystkich kroków twój plik HTML i CSS powinny wyglądać następująco:

Plik HTML (index.html)

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"> <!-- Podłącz plik CSS -->
  <title>Zawijanie elementów</title>
</head>
<body>
  <section class="container nowrap">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
    <div>Element 7</div>
    <div>Element 8</div>
  </section>
  <section class="container wrap">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
    <div>Element 7</div>
    <div>Element 8</div>
  </section>
  <section class="container wrap-reverse">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
    <div>Element 7</div>
    <div>Element 8</div>
  </section>
</body>
</html>

Plik CSS (styles.css)

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 20px;
}

.container {
  display: flex;
  border: 1px solid #000;
  padding: 10px;
  width: 80%;
  height: auto;
  margin: 10px 0;
  flex-wrap: nowrap; /* Domyślna wartość */
}

.container div {
  background-color: lightblue;
  margin: 5px;
  padding: 20px;
  text-align: center;
  flex: 1 1 30%;
}

/* Układ z flex-wrap: nowrap */
.nowrap {
  flex-wrap: nowrap;
}

/* Układ z flex-wrap: wrap */
.wrap {
  flex-wrap: wrap;
}

/* Układ z flex-wrap: wrap-reverse */
.wrap-reverse {
  flex-wrap: wrap-reverse;
}

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!

Kod do tej lekcji: index.html
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox - Flex Wrap</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Flex Wrap - Zawijanie elementów</h1>
        <p class="subtitle">Kontroluj czy elementy mają się zawijać do nowej linii</p>

        <section class="demo-section">
            <h2>flex-wrap: nowrap (domyślnie)</h2>
            <div class="flex-container wrap-nowrap">
                <div class="flex-item">1</div>
                <div class="flex-item">2</div>
                <div class="flex-item">3</div>
                <div class="flex-item">4</div>
                <div class="flex-item">5</div>
                <div class="flex-item">6</div>
                <div class="flex-item">7</div>
            </div>
            <p class="description">Wszystkie elementy w jednej linii - mogą się zmniejszyć</p>
        </section>

        <section class="demo-section">
            <h2>flex-wrap: wrap</h2>
            <div class="flex-container wrap-wrap">
                <div class="flex-item">1</div>
                <div class="flex-item">2</div>
                <div class="flex-item">3</div>
                <div class="flex-item">4</div>
                <div class="flex-item">5</div>
                <div class="flex-item">6</div>
                <div class="flex-item">7</div>
            </div>
            <p class="description">Elementy zawijają się do następnej linii gdy brakuje miejsca</p>
        </section>

        <section class="demo-section">
            <h2>flex-wrap: wrap-reverse</h2>
            <div class="flex-container wrap-reverse">
                <div class="flex-item">1</div>
                <div class="flex-item">2</div>
                <div class="flex-item">3</div>
                <div class="flex-item">4</div>
                <div class="flex-item">5</div>
                <div class="flex-item">6</div>
                <div class="flex-item">7</div>
            </div>
            <p class="description">Elementy zawijają się w odwrotnej kolejności</p>
        </section>

        <section class="demo-section practice">
            <h2>Praktyka: Egipska galeria skarbów</h2>
            <p class="practice-description">Skarby faraona w responsywnej galerii</p>

            <div class="gallery">
                <div class="treasure-item">◆</div>
                <div class="treasure-item">◆</div>
                <div class="treasure-item">◆</div>
                <div class="treasure-item">◆</div>
                <div class="treasure-item">◆</div>
                <div class="treasure-item">◆</div>
                <div class="treasure-item">◆</div>
                <div class="treasure-item">◆</div>
                <div class="treasure-item">◆</div>
                <div class="treasure-item">◆</div>
            </div>

            <div class="gallery-info">
                <p>Zmień szerokość okna aby zobaczyć jak galeria się dostosowuje!</p>
            </div>
        </section>
    </div>
</body>
</html>

Hasła z dokumentacji w tej lekcji

Widzisz błąd w tej lekcji?

Sprawdź się

Odpowiedz na pytania z tej lekcji. Wybierz odpowiedź, a od razu zobaczysz, czy jest poprawna.

  1. 1. Jaka jest domyślna wartość właściwości flex-wrap?

Zadania praktyczne w grze

  • Klikanie w kolejności

    Ułóż deklarację CSS pozwalającą elementom przenosić się do nowych wierszy:

  • Edytor kodu

    Stwórz kontener flex z wieloma elementami o stałej szerokości i użyj flex-wrap: wrap, aby elementy automatycznie przenosiły się do nowych wierszy.

Przydatne artykuły

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