CSS Academy · Lekcja

Display flex i flex-direction

Włączą Państwo flexbox dla kontenera i ustawią kierunek osi głównej za pomocą flex-direction.

Display flex i flex-direction to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 1 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.

Włączanie Flexboxa

Flexbox zostaje aktywowany przez ustawienie display: flex na elemencie kontenera (czyli kontenerze flex). Jego bezpośrednie elementy potomne automatycznie stają się elementami flex.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

Flex inline

display: inline-flex tworzy kontener flex, który układa się w linii (podobnie jak inline-block), a nie jako blok. Wewnętrzne działanie Flexboxa pozostaje identyczne.

<p>Status: <span class="badge">🔥 Trending</span></p>

Oś główna i oś poprzeczna

Flexbox ma dwie osie:

Oś główna: podstawowy kierunek rozmieszczania elementów
Oś poprzeczna: kierunek prostopadły do osi głównej

Wszystkie właściwości flex odnoszą się do tych osi, a nie do stałych kierunków.

flex-direction: row (domyślnie)

Domyślnym kierunkiem jest row: elementy są rozmieszczane od lewej do prawej wzdłuż poziomej osi głównej.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

flex-direction: column

flex-direction: column układa elementy pionowo. Oś główna staje się pionowa, a oś poprzeczna — pozioma.

<div class="sidebar">
    <div>Dashboard</div>
    <div>Reports</div>
    <div>Settings</div>
  </div>

flex-direction: row-reverse

row-reverse odwraca kierunek poziomy: elementy są rozmieszczane od prawej do lewej. Początek osi głównej znajduje się po prawej stronie.

<nav class="rtl-nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

flex-direction: column-reverse

column-reverse układa elementy od dołu do góry. Ostatni element pojawia się na górze.

<div class="chat-list">
    <div>Hey there!</div>
    <div>How are you?</div>
    <div>Doing great, thanks!</div>
  </div>

flex-direction wpływa na wszystkie właściwości flex

Po zmianie flex-direction właściwość justify-content również zmienia kierunek działania. Jeśli kierunek to column, właściwość justify-content wyrównuje elementy wzdłuż osi pionowej, a nie poziomej.

Prosty układ poziomy

Najprostszy przypadek użycia Flexboxa — wyśrodkowanie elementów w menu nawigacyjnym:

<nav class="nav">
    <div>Logo</div>
    <a href="#">Home</a>
    <a href="#">Pricing</a>
    <a href="#">Contact</a>
  </nav>

Prosty układ pionowy

Wyśrodkowanie zawartości karty w pionie i w poziomie:

<div class="card">
    <h3>Welcome</h3>
    <p>Centered content</p>
  </div>

Skrót flex-flow

flex-flow jest skrótem dla właściwości flex-direction i flex-wrap:

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

Szybkie sprawdzenie

Gdy ustawiono flex-direction: column, którą osią steruje justify-content?

Podsumowanie

Ustaw display: flex na kontenerze, aby utworzyć kontekst flex dla jego elementów potomnych. flex-direction określa kierunek osi głównej: row (poziomy) lub column (pionowy). Wszystkie właściwości wyrównywania flex odnoszą się do tych osi, a nie do stałych kierunków: lewo/prawo/góra/dół.

Często zadawane pytania

Czy lekcja „Display flex i flex-direction” jest bezpłatna?

Tak — pełny tekst „Display flex i flex-direction” 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 „Display flex i flex-direction”?

Włączą Państwo flexbox dla kontenera i ustawią kierunek osi głównej za pomocą flex-direction. Ć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 1 z 4.

Ile czasu zajmuje lekcja „Display flex i flex-direction”?

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