CSS Academy · Lekcja

Flex-wrap i align-content

Pozwolą Państwo elementom flex przechodzić do wielu wierszy i wyrównają zawinięte wiersze za pomocą align-content.

Flex-wrap i align-content to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.

flex-wrap: nowrap (domyślnie)

Domyślnie elementy flex nie zawijają się. Jeśli elementy przekroczą szerokość kontenera, zmniejszą się lub wystąpią poza jego obszar zamiast przejść do nowego wiersza.

flex-wrap: wrap

W przypadku flex-wrap: wrap elementy, które przekroczą oś główną, przechodzą do nowego wiersza (lub kolumny w kierunku kolumnowym). Każdy wiersz powstały po zawinięciu działa jak osobny mini-kontener flex.

<div class="card-grid">
    <div>Card 1</div>
    <div>Card 2</div>
    <div>Card 3</div>
    <div>Card 4</div>
    <div>Card 5</div>
  </div>

flex-wrap: wrap-reverse

wrap-reverse zawija elementy w przeciwnym kierunku osi poprzecznej: nowe wiersze pojawiają się powyżej (w kierunku wierszowym), a nie poniżej.

Wzorzec zawijanych kart

Klasyczny responsywny układ kart, w którym karty przechodzą do kolejnego wiersza wraz ze zmniejszaniem się obszaru widoku:

<div class="cards">
    <div class="card">Card A</div>
    <div class="card">Card B</div>
    <div class="card">Card C</div>
  </div>

align-content dla wielu wierszy

align-content kontroluje odstępy między zawiniętymi wierszami w osi poprzecznej. Nie działa, gdy występuje tylko jeden wiersz. Dostępne wartości odpowiadają wartościom justify-content.

Wartości align-content

Dostępne wartości:

flex-start — grupuje wiersze przy początku osi poprzecznej
flex-end — grupuje je przy końcu osi poprzecznej
center — wyśrodkowuje wiersze
space-between — zapewnia równe odstępy między wierszami
space-around — zapewnia równe odstępy wokół wierszy
stretch — rozciąga wiersze, aby wypełniły dostępne miejsce (domyślnie)

<div class="gallery">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>

align-items a align-content

Różnica:

align-items — wyrównuje elementy w obrębie każdego wiersza flex
align-content — wyrównuje same wiersze flex w obrębie kontenera

Odstęp w Flexboxie

Właściwość gap (wcześniej grid-gap) dodaje spójne odstępy między elementami flex bez używania marginesów. Działa zarówno dla odstępów między wierszami, jak i kolumnami.

<div class="flex-grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

Responsywne zawijanie bez zapytań medialnych

Automatycznie zawijaj elementy do tylu kolumn, ile zmieści się przy ustalonym idealnym rozmiarze. Zapytania medialne nie są potrzebne:

<div class="grid">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
  </div>

Skrót flex-flow

flex-flow łączy właściwości flex-direction i flex-wrap w jednej deklaracji:

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

Zawijanie a Grid

W przypadku złożonych układów dwuwymiarowych z określonymi wierszami i kolumnami bardziej odpowiedni jest CSS Grid. Zawijanie we Flexboxie najlepiej sprawdza się w przypadku jednowymiarowej zawartości, która może przepływać do wielu wierszy.

Szybkie sprawdzenie

Jaka właściwość wyrównuje same zawinięte wiersze, gdy kontener flex ma wiele wierszy?

Podsumowanie

flex-wrap: wrap pozwala elementom przechodzić do nowych wierszy. align-content kontroluje odstępy między tymi wierszami w kontenerze wielowierszowym. Używaj gap, aby zachować spójne odstępy. Połącz flex: 1 1 250px z flex-wrap, aby tworzyć responsywne siatki kart bez zapytań medialnych.

Często zadawane pytania

Czy lekcja „Flex-wrap i align-content” jest bezpłatna?

Tak — pełny tekst „Flex-wrap i align-content” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Flex-wrap i align-content”?

Pozwolą Państwo elementom flex przechodzić do wielu wierszy i wyrównają zawinięte wiersze za pomocą align-content. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć CSS Academy?

Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Flex-wrap i align-content”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?

Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do CSS Academy