ZAWODNIK

Flexbox i Grid: układ sekcji jak w zadaniu CKE

INF.03 · teoria
autor: redakcja · 08.09.2026
Oś główna i oś poprzeczna, display flex, justify-content i align-items, siatka z grid-template-columns i grid-template-areas oraz układ panel 30 procent obok bloku głównego 70 procent z arkusza CKE. Lekcja 4.7 kursu INF.03.

[ INF.03: PYTANIA Z TEGO DZIAŁU ]

Przejrzyj pytania: cssĆwicz dział: css
Fle­xbox i grid to dwa me­cha­ni­zmy CSS do roz­kła­da­nia bloków na stro­nie: fle­xbox układa je w jednym kie­run­ku, w wier­szu albo w ko­lum­nie, a grid roz­sta­wia je w siatce z kolumn i wier­szy. Oba za­stą­pi­ły float (ob­te­ka­nie) w bu­do­wie kolumn, bo do usta­wia­nia bloków obok siebie zo­sta­ły za­pro­jek­to­wa­ne, a float służy do ob­le­wa­nia obrazu tek­stem. W części pi­sem­nej py­ta­nia wprost o fle­xbox tra­fia­ją się rzadko, ale ry­su­nek układu bloków 2 do 5 z czte­re­ma wer­sja­mi kodu CSS do wyboru wraca re­gu­lar­nie. W za­da­niu prak­tycz­nym to naj­krót­sza droga do po­le­ce­nia „panel lewy o sze­ro­ko­ści 30 pro­cent, blok główny 70 pro­cent, oba obok siebie".

Fle­xbox: kon­te­ner i ele­men­ty flex

Kon­te­ner flex to ele­ment, któ­re­mu przy­pi­sa­no display: flex; jego bez­po­śred­nie dzieci stają się ele­men­ta­mi flex i usta­wia­ją się w jednym wier­szu obok siebie, nie­za­leż­nie od tego, że są blo­ka­mi. De­kla­ra­cję stawia się zawsze na RODZICU, a nie na dzie­ciach: dzieci nie do­sta­ją żadnej wła­snej wła­ści­wo­ści, tylko nowy sposób roz­sta­wie­nia. Ele­men­tem flex zo­sta­je wy­łącz­nie dziec­ko bez­po­śred­nie, więc bloki scho­wa­ne o poziom głę­biej układ pomija.
Kon­te­ner ma dwie osie i od nich zależy dzia­ła­nie wszyst­kich po­zo­sta­łych wła­ści­wo­ści. Oś główna (main axis) bie­gnie w kie­run­ku, w którym idą ele­men­ty: przy do­myśl­nym flex-direction: row po­zio­mo, od lewej do prawej. Oś po­przecz­na (cross axis) jest do niej pro­sto­pa­dła, więc przy wier­szu bie­gnie w pionie. Po zmia­nie kie­run­ku na flex-direction: column osie za­mie­nia­ją się rolami: główna staje się pio­no­wa, a po­przecz­na po­zio­ma.
Kontener flex z trzema elementami: oś główna biegnie poziomo i rozkłada elementy właściwością justify-content, oś poprzeczna pionowo i wyrównuje je przez align-items
Ry­su­nek po­ka­zu­je jedyną rzecz, którą trzeba tu za­pa­mię­tać: justify-content roz­kła­da ele­men­ty wzdłuż osi GŁÓWNEJ, a align-items wy­rów­nu­je je wzdłuż POPRZECZNEJ.
Wła­ści­wość kon­te­ne­ra
Co usta­wia
War­to­ści
display
włącza układ ela­stycz­ny
flex
flex-direction
kie­ru­nek osi głów­nej
row, column
flex-wrap
za­wi­ja­nie do ko­lej­nej linii, gdy brak miej­sca
nowrap, wrap
justify-content
roz­miesz­cze­nie wzdłuż osi głów­nej
flex-start, center, space-between, space-around
align-items
wy­rów­na­nie wzdłuż osi po­przecz­nej
stretch, center, flex-start
gap
odstęp między ele­men­ta­mi
10px, 20px
War­to­ści justify-content różnią się tym, gdzie ląduje wolne miej­sce. flex-start upycha ele­men­ty na po­cząt­ku wier­sza, center po­środ­ku, space-between roz­su­wa je na całą sze­ro­kość tak, że pierw­szy dotyka lewej kra­wę­dzi, a ostat­ni prawej, space-around zo­sta­wia odstęp także przy kra­wę­dziach. Prze­rwy między ele­men­ta­mi wy­god­niej usta­wić wła­ści­wo­ścią gap niż mar­gi­ne­sa­mi ze­wnętrz­ny­mi, bo gap nie do­kła­da ni­cze­go przed pierw­szym i za ostat­nim blo­kiem.
Wła­ści­wość ele­men­tu
Co robi
flex: 1
ele­ment rośnie i dzieli wolne miej­sce po równo z innymi
flex: 0 0 30%
ele­ment ma do­kład­nie 30 pro­cent, nie rośnie i się nie kurczy
flex-basis
roz­miar wyj­ścio­wy, od któ­re­go za­czy­na się po­dział miej­sca
order
ko­lej­ność wy­świe­tla­nia, nie­za­leż­na od ko­lej­no­ści w kodzie HTML
align-self
wy­rów­na­nie w po­przek tego jed­ne­go ele­men­tu, wbrew align-items
Menu po­zio­me to naj­częst­sze za­sto­so­wa­nie fle­xbok­sa w naszym skle­pie kom­pu­te­ro­wym. Menu jest w HTML listą punk­to­wa­ną za­mknię­tą w <nav>, więc punkty stoją jeden pod drugim; display: flex na liście usta­wia je w rzę­dzie, a list-style-type: none usuwa punk­to­ry.
nav ul { display: flex; gap: 20px; list-style-type: none; padding: 0; }
Drugie za­sto­so­wa­nie to wy­środ­ko­wa­nie za­war­to­ści w pionie i w po­zio­mie naraz, czego mar­gi­ne­sa­mi zrobić się nie da. Baner sklepu ma w ar­ku­szu podaną wy­so­kość, a napis ma stać w jego środku.
header { display: flex; justify-content: center; align-items: center; height: 80px; background-color: DarkSlateGray; }

Grid: ko­lum­ny, wier­sze i linie siatki

Grid to układ dwu­wy­mia­ro­wy: display: grid na ro­dzi­cu dzieli go na ko­lum­ny i wier­sze, a dzieci wpa­da­ją w ko­lej­ne ko­mór­ki tej siatki. Liczbę i sze­ro­kość kolumn podaje grid-template-columns, a wy­so­kość wier­szy grid-template-rows. Zapis 30% 70% daje dwie ko­lum­ny o takich wła­śnie sze­ro­ko­ściach, repeat(3, 1fr) trzy ko­lum­ny równe, a 1fr 2fr dwie, z któ­rych druga jest dwa razy szer­sza.
Jed­nost­ka fr (fraction, część) dzieli WOLNE miej­sce, czyli to, co zo­sta­ło po od­stę­pach i ko­lum­nach o stałej sze­ro­ko­ści. Dla­te­go 1fr 2fr daje jedną trze­cią i dwie trze­cie reszty, a nie 1 pro­cent i 2 pro­cent. Od­stę­py między ko­mór­ka­mi usta­wia gap, ta sama wła­ści­wość co we fle­xbok­sie.
Siatka o dwóch kolumnach 30 i 70 procent z liniami od 1 do 3: baner, menu i stopka biegną od linii 1 do 3, panel boczny stoi w kolumnie pierwszej, blok główny w drugiej
Blok można roz­cią­gnąć na kilka ko­mó­rek i służą do tego numery LINII siatki, nie numery kolumn. Linie liczy się od 1, od lewej kra­wę­dzi kon­te­ne­ra, więc siatka o dwóch ko­lum­nach ma trzy linie pio­no­we, a o trzech ko­lum­nach cztery. Zapis grid-column: 1 / 3 znaczy „od linii 1 do linii 3", czyli przez obie ko­lum­ny, a grid-row robi to samo w pionie. Tak wła­śnie na ry­sun­ku baner, menu i stopka biegną przez całą sze­ro­kość, panel boczny zaj­mu­je ko­lum­nę pierw­szą (30 pro­cent), a blok główny drugą (70 pro­cent).
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 200px 200px; gap: 10px; } .galeria .wyrozniony { grid-column: 1 / 3; grid-row: 1; }
Drugi sposób opi­sa­nia tej samej siatki jest czy­tel­niej­szy, bo za­miast liczyć linie, rysuje układ na­zwa­mi. grid-template-areas (sza­blon ob­sza­rów) przyj­mu­je po jednym ciągu znaków na każdy wiersz siatki, a w ciągu tyle nazw, ile jest kolumn. Nazwa po­wtó­rzo­na w są­sied­nich ko­mór­kach zlepia je w jeden obszar. Potem każdy blok do­sta­je grid-area z nazwą swo­je­go ob­sza­ru. Nazwy wy­my­ślasz sam i pi­szesz je bez pol­skich znaków.

Układ z ar­ku­sza dwoma spo­so­ba­mi

Arkusz CKE rysuje układ sklepu pro­sto­ką­ta­mi: baner na górze, pod nim menu, niżej panel boczny o sze­ro­ko­ści 30 pro­cent obok bloku głów­ne­go o sze­ro­ko­ści 70 pro­cent, na dole stopka. Struk­tu­ra HTML jest gotowa z lekcji o znacz­ni­kach sekcji: <header>, <nav>, <aside>, <main> i <footer> stoją w pliku jeden pod drugim. Do tego samego wyniku pro­wa­dzą dwie drogi.
Pierw­sza to jeden grid na całym <body>, opi­sa­ny ob­sza­ra­mi. Nazwy ob­sza­rów ukła­da­ją się w ry­su­nek: dwa razy baner w pierw­szym wier­szu znaczy, że baner idzie przez obie ko­lum­ny.
body { display: grid; grid-template-columns: 30% 70%; grid-template-areas: "baner baner" "menu menu" "panel glowny" "stopka stopka"; gap: 10px; }
header { grid-area: baner; } nav { grid-area: menu; } aside { grid-area: panel; } main { grid-area: glowny; } footer { grid-area: stopka; }
Druga droga używa fle­xbok­sa tylko tam, gdzie na­praw­dę są dwie ko­lum­ny, czyli w środ­ko­wym wier­szu. Panel i blok główny trzeba wtedy opa­ko­wać do­dat­ko­wym znacz­ni­kiem <div> z klasą, bo fle­xbox roz­sta­wia wy­łącz­nie dzieci jed­ne­go ro­dzi­ca. Baner, menu i stopka zo­sta­ją poza opa­ko­wa­niem i same roz­cią­ga­ją się na całą sze­ro­kość, bo są blo­ka­mi.
.srodek { display: flex; gap: 10px; } aside { flex: 0 0 30%; } main { flex: 1; }
Wybór między nimi jest prosty. Fle­xbox bie­rzesz, gdy roz­sta­wiasz ele­men­ty w JEDNYM kie­run­ku: menu w rzę­dzie, dwie ko­lum­ny obok siebie, przy­ci­ski w linii, napis w środku banera. Grid bie­rzesz, gdy opi­su­jesz całą stronę naraz i liczy się jed­no­cze­śnie po­dział na ko­lum­ny i na wier­sze. Przy ukła­dzie z czte­rech wier­szy grid ma tę prze­wa­gę, że cały układ widać w jednym miej­scu ar­ku­sza stylów.

Ko­lum­ny, pu­deł­ko i stary float

Sze­ro­kość ko­lum­ny liczy się razem z mar­gi­ne­sa­mi we­wnętrz­ny­mi i ob­ra­mo­wa­niem, więc panel flex: 0 0 30% z ob­ra­mo­wa­niem 2 px zajmie w sumie więcej niż 30 pro­cent, dopóki nie usta­wisz box-sizing: border-box, o czym mówi lekcja o modelu pu­deł­ko­wym. Star­szy sposób bu­do­wa­nia kolumn opi­su­je lekcja o wła­ści­wo­ściach di­splay, po­si­tion i float: tam bloki spły­wa­ją na bok, wy­pa­da­ją ze zwy­kłe­go prze­pły­wu i trzeba je po­sprzą­tać wła­ści­wo­ścią clear, żeby stopka nie wje­cha­ła pod ko­lum­nę. Fle­xbox i grid tego kło­po­tu nie mają, bo bloki zo­sta­ją w prze­pły­wie, a rodzic zna ich wy­mia­ry.
Przy okazji znika pro­blem rów­nych wy­so­ko­ści kolumn. Do­myśl­na war­tość align-items: stretch roz­cią­ga wszyst­kie ele­men­ty flex do wy­so­ko­ści naj­wyż­sze­go z nich, więc panel boczny z trzema wier­sza­mi tekstu sięga tak nisko jak blok główny z dzie­się­cio­ma i tło obu kończy się na tej samej wy­so­ko­ści. Przy float ten sam efekt wy­ma­gał sztu­czek z tłem ro­dzi­ca.
Na wąskim ekra­nie dwie ko­lum­ny trzeba złożyć jedna pod drugą i wy­star­czy do tego jedna de­kla­ra­cja flex-direction: column we­wnątrz reguły @media, co po­ka­zu­je lekcja o stro­nach re­spon­syw­nych.

Na eg­za­mi­nie

Py­ta­nie pi­sem­ne naj­czę­ściej po­ka­zu­je ry­su­nek układu bloków po­nu­me­ro­wa­nych od 2 do 5 razem z kodem HTML i każe wska­zać kod CSS, który taki układ daje. Od­po­wiedź czyta się z ry­sun­ku w dwóch kro­kach: policz, ile bloków stoi w jednym wier­szu, i sprawdź ich sze­ro­ko­ści. Trzy bloki obok siebie o równej sze­ro­ko­ści to repeat(3, 1fr) albo trzy razy flex: 1, a blok wąski przy sze­ro­kim to para 30 i 70 pro­cent. Drugi kształt to po­je­dyn­cza wła­ści­wość do roz­po­zna­nia: justify-content roz­kła­da ele­men­ty wzdłuż osi głów­nej, a nie wy­rów­nu­je ich w pionie, align-items działa w po­przek, a menu po­zio­me z listy punk­to­wa­nej robi wła­ści­wość display z war­to­ścią flex albo inline-block, nie position ani text-align.
Dwie od­po­wie­dzi mylą się re­gu­lar­nie. display: flex przy­pi­su­je się RODZICOWI, więc reguła na­pi­sa­na dla li za­miast dla ul nie ustawi punk­tów w rzę­dzie. Jed­nost­ka fr to część wol­ne­go miej­sca, a nie pro­cent sze­ro­ko­ści ani pik­se­le, więc ko­lum­ny 1fr 1fr obok ko­lum­ny 200px dzielą między siebie to, co zo­sta­nie po od­ję­ciu tych 200 px i od­stę­pów.
W za­da­niu prak­tycz­nym oce­nia­ny jest wygląd, nie sposób jego uzy­ska­nia: arkusz przyj­mie fle­xbok­sa, grid i float, o ile na ekra­nie po­wsta­nie układ z ry­sun­ku. Sze­ro­ko­ści prze­pi­suj do­kład­nie tak, jak podaje po­le­ce­nie, czyli w pro­cen­tach, jeśli arkusz pisze o pro­cen­tach. Zanim za­mkniesz plik, sprawdź trzy rzeczy: czy panel i blok główny na­praw­dę stoją obok siebie, czy ich pro­por­cja zgadza się z ry­sun­kiem i czy stopka jest pod OBIEMA ko­lum­na­mi, a nie obok jednej z nich.

Ściąga

Zapis
Znaczy
display: flex
rodzic układa dzieci w jednym wier­szu obok siebie
flex-direction: column
oś główna staje się pio­no­wa, ele­men­ty jeden pod drugim
justify-content: center
roz­miesz­cze­nie wzdłuż osi głów­nej, tu na środku
justify-content: space-between
pierw­szy przy lewej kra­wę­dzi, ostat­ni przy prawej
align-items: center
wy­rów­na­nie wzdłuż osi po­przecz­nej, tu w pionie
align-items: stretch
war­tość do­myśl­na, ko­lum­ny mają równą wy­so­kość
gap: 20px
odstęp między ele­men­ta­mi, bez od­stę­pu przy kra­wę­dziach
flex: 1
ele­ment dzieli wolne miej­sce po równo z innymi
flex: 0 0 30%
ele­ment ma do­kład­nie 30 pro­cent sze­ro­ko­ści
display: grid
rodzic dzieli się na ko­lum­ny i wier­sze siatki
grid-template-columns: 30% 70%
dwie ko­lum­ny: panel 30 pro­cent, blok główny 70 pro­cent
grid-template-columns: repeat(3, 1fr)
trzy ko­lum­ny dzie­lą­ce wolne miej­sce po równo
grid-column: 1 / 3
blok od linii 1 do linii 3, czyli przez dwie ko­lum­ny
grid-template-areas
ry­su­nek układu na­zwa­mi ob­sza­rów, po ciągu na wiersz
grid-area: baner
przy­pi­sa­nie bloku do ob­sza­ru o tej nazwie
Pobierz ściągę PDF

[ W TYM DZIALE ]

poprzednia: Układ strony w CSS: display, position, float, z-index, overflownastępna: Strony responsywne: viewport, @media, jednostki względne, obrazyspis działu: CSS

[ INF.03: INNE ARTYKUŁY ]

Hub INF.03Zakres materiałuBazy danych i SQL na egzaminie INF.03CSS na egzaminie INF.03Formularze HTML na egzaminie INF.03Grafika i multimedia na egzaminie INF.03HTML na egzaminie INF.03pokaż więcej (39)
ZAWODNIK
egzamin zawodowy INF.02 · INF.03 · INF.04
Serwer Discord›
Egzaminy zawodowe IT/Matury/Studia
@yastor
Polityka prywatnościRegulamin
© 2026 Zawodnik · by Yastor
Arkusze i zasady oceniania pochodzą z CKE. Serwis nie jest powiązany z Centralną Komisją Egzaminacyjną.