Frontend Academy · Lekcja

Display: podstawy block, inline, flex i grid

Przełączaj wartości display i sprawdzaj, jak block, inline, flex oraz grid odmiennie rozmieszczają treść.

Display: podstawy block, inline, flex i grid to bezpłatna lekcja Frontend 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 Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Właściwość display

Właściwość display jest najważniejszą właściwością CSS używaną do tworzenia układu. Kontroluje sposób, w jaki element uczestniczy w przepływie układu, oraz sposób rozmieszczenia jego elementów potomnych. Najczęściej używane wartości to: block, inline, inline-block, flex, grid i none.

display: block

Elementy blokowe zajmują całą szerokość kontenera i rozpoczynają się w nowym wierszu. Przykłady: <div>, <p>, <h1>. Elementom blokowym można ustawiać szerokość, wysokość, margines i dopełnienie.

.card {
  display: block;
  width: 100%;
  margin-bottom: 24px;
}

display: inline

Elementy liniowe płyną w obrębie tekstu — nie rozpoczynają się w nowym wierszu. Przykłady: <span>, <a>, <strong>. Szerokość, wysokość i marginesy pionowe nie mają wpływu na elementy liniowe.

span { display: inline; color: blue; }
/* Setting width: 200px on a span does nothing */

display: inline-block

inline-block łączy obie cechy: element płynie w jednej linii (jak tekst), ale przyjmuje szerokość, wysokość i margines pionowy (jak element blokowy). Jest przydatny w przypadku przycisków i odznak, które powinny znajdować się w jednym wierszu tekstu.

.badge {
  display: inline-block;
  padding: 4px 8px;
  background: #e2e8f0;
  border-radius: 4px;
  font-size: 0.75rem;
}

display: none

display: none całkowicie usuwa element z układu — nie zajmuje on miejsca. Aby ukryć element z zachowaniem zajmowanego przez niego miejsca, należy użyć visibility: hidden.

Flexbox — układ jednowymiarowy

display: flex przekształca element w kontener flex. Jego bezpośrednie elementy potomne stają się elementami flex, które układają się wzdłuż wiersza (domyślnie) lub kolumny. Flexbox świetnie sprawdza się przy rozdzielaniu wolnego miejsca i wyrównywaniu elementów.

.nav {
  display: flex;
  justify-content: space-between; /* horizontal */
  align-items: center;            /* vertical */
  gap: 16px;
}

Najważniejsze właściwości Flexboxa

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

CSS Grid — układ dwuwymiarowy

display: grid przekształca element w kontener siatki. Wiersze i kolumny definiuje się za pomocą grid-template-columns i grid-template-rows. Grid idealnie nadaje się do tworzenia układów stron i siatek kart.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

Jednostka fr

Jednostka fr (ułamek) rozdziela dostępne miejsce. grid-template-columns: 1fr 2fr 1fr tworzy trzy kolumny, z których środkowa otrzymuje dwa razy więcej miejsca niż pozostałe.

.layout {
  display: grid;
  grid-template-columns: 240px 1fr; /* sidebar + main */
  gap: 32px;
}

Wybór między Flexboxem a Gridem

Flexbox należy stosować do układów jednowymiarowych (wiersz przycisków, stos kart). Grid należy stosować do układów dwuwymiarowych (szkielet strony, galeria zdjęć z określonymi wierszami i kolumnami). Oba rozwiązania mogą współistnieć na tej samej stronie.

display: none a visibility: hidden

display: none: usuwa element z układu, więc nie jest on dostępny dla czytników ekranu. visibility: hidden: element jest niewidoczny, ale nadal zajmuje miejsce i pozostaje w drzewie dostępności. opacity: 0: element jest niewidoczny, ale zajmuje miejsce i jest dostępny.

Szybki test

Należy utworzyć responsywną siatkę kart z wieloma wierszami i kolumnami. Od jakiej wartości display najlepiej zacząć?

Podsumowanie: wartości display

block zajmuje całą szerokość. inline płynie razem z tekstem. inline-block łączy obie cechy. flex rozmieszcza elementy potomne w jednym wymiarze. grid rozmieszcza elementy potomne w dwóch wymiarach. none usuwa element z układu. Opanowanie tych wartości daje kontrolę nad każdym układem stron internetowych.

Często zadawane pytania

Czy lekcja „Display: podstawy block, inline, flex i grid” jest bezpłatna?

Tak — pełny tekst „Display: podstawy block, inline, flex i grid” 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 Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Display: podstawy block, inline, flex i grid”?

Przełączaj wartości display i sprawdzaj, jak block, inline, flex oraz grid odmiennie rozmieszczają treść. Ćwiczysz Frontend 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ąć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend 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 „Display: podstawy block, inline, flex i grid”?

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 Frontend Academy?

Tak. Każda lekcja Frontend 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

Selektory i kaskada
Kolory, typografia i model pudełkowy
Display: podstawy block, inline, flex i grid
Pozycjonowanie: relative, absolute, fixed, sticky

← Powrót do Frontend Academy