HTML I CSS · INF.03 · MODUŁ 09

Układ strony — display, float, position i flexbox

Od klasycznego floatu do flexboxa — nauczysz się układać stronę tak, jak wymaga tego projekt.

Wprowadzenie

Przeglądarka ma swój domyślny układ strony. Elementy blokowe, takie jak div, p czy section, zaczynają się w nowej linii i zajmują całą dostępną szerokość. Elementy liniowe, np. span, a czy strong, płyną w tekście i zajmują tylko tyle miejsca, ile potrzebują.

Właściwość display pozwala ten domyślny układ zmienić. Możesz zrobić z elementu blok, element liniowy, element liniowo-blokowy albo całkiem go ukryć. To pierwsza własność, po którą sięgasz, gdy coś ma stanąć obok czegoś innego.

W arkuszach egzaminacyjnych często pojawia się float. Obraz z float: left zostaje przesunięty do lewej, a tekst go opływa. Kolejny element można „odkleić” od obrazu przez clear: both. To klasyka, którą trzeba umieć przeczytać, nawet jeśli dziś układy buduje się głównie flexboxem.

Do precyzyjnego ustawienia elementu służy position: relative, absolute, fixed i sticky. Do ustawiania elementów w rzędzie lub kolumnie — display: flex. Te dwie rzeczy spotkasz w prawie każdym projekcie INF.03.

Najważniejsza własność

Najważniejsza jest display, bo decyduje, w jakim trybie element bierze udział w układzie. Dopiero potem ma sens ustawianie float, position albo flexboxa.

Poza trybem wyświetlania liczy się pozycja. Wartości position różnią się tym, względem czego element jest ustawiany i czy zostawia po sobie miejsce:

• static — wartość domyślna; top, right, bottom, left nic nie robią.
• relative — przesuwa element względem jego normalnego miejsca, ale miejsce w układzie zostaje.
• absolute — wyjmuje element z przepływu i ustawia względem najbliższego przodka z pozycjonowaniem innym niż static.
• fixed — ustawia element względem okna przeglądarki; nie przewija się razem ze stroną.
• sticky — element zostaje w przepływie, dopóki nie osiągnie podanej granicy, a potem przykleja się do niej podczas przewijania.

z-index działa na elementy pozycjonowane oraz na dzieci flexboxa. Większa liczba oznacza wyżej. Element bez position i bez bycia elementem flex nie reaguje na z-index.

Flexbox włącza się na rodzicu przez display: flex. Dzieci ustawiają się wtedy w jednej linii. justify-content rozdziela je wzdłuż osi głównej, align-items wyrównuje w poprzek, a gap dodaje odstępy. flex-direction: column zmienia kierunek na pionowy, flex-wrap: wrap pozwala przejść do kolejnej linii, a flex na dziecku mówi, jak ma rosnąć lub maleć.

.zdjecie {
  float: right;
  width: 220px;
  margin-left: 18px;
}

.karty {
  display: 
      — wybierz —
      flex
      block
      grid
    ;
  
      — wybierz —
      align-items
      flex-wrap
      justify-content
    : wrap;
  gap: 16px;
}

.karta {
  
      — wybierz —
      order
      width
      flex
    : 1 1 180px;
}

Przykłady

Trzy układy, które najczęściej pojawiają się w zadaniach: opływanie obrazu, pozycjonowany badge ze sticky nagłówkiem oraz flexbox w nawigacji i kartach.

Przykład 1 — obraz opływany tekstem

Zdjęcie ma stać po lewej stronie, a tekst ma je opływać. Stopka ma zaczynać się poniżej obrazu, niezależnie od długości tekstu.

HTML

<article class="artykul">
  <h2>Weekend w górach</h2>
  <img src="../assets/gory.svg" alt="Górski pejzaż ze słońcem nad szczytami">
  <p>Poranek w dolinie był chłodny, ale niebo nad szczytami
     zapowiadało słoneczny dzień. Zostawiliśmy samochód na parkingu
     i ruszyliśmy ścieżką w stronę schroniska.</p>
  <p>Im wyżej wchodziliśmy, tym częściej zatrzymywaliśmy się dla
     widoków. Na hali spotkaliśmy turystów z mapą i psa, który biegł
     przodem. Po trzech godzinach dotarliśmy do schroniska.</p>
  <footer class="stopka">Stopka zaczyna się poniżej obrazu,
     bo ma <strong>clear: both</strong>.</footer>
</article>

CSS

.artykul { max-width: 720px; }
.artykul h2 { margin: 0 0 12px; font-size: 26px; }
.artykul img {
  float: left;
  width: 260px;
  margin: 4px 22px 12px 0;
  border-radius: 12px;
}
.artykul p { margin: 0 0 12px; }
.stopka {
  clear: both;
  margin-top: 22px;
  padding: 14px 18px;
  border-top: 2px solid #2563eb;
  border-radius: 0 0 10px 10px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 14px;
}

podgląd w przeglądarce

1. Obraz jest pierwszy w HTML, więc pojawia się przed tekstem.
2. float: left przesuwa go do lewej, a tekst z kolejnych akapitów zajmuje wolne miejsce z prawej.
3. width: 260px ogranicza szerokość obrazu, a prawy margines tworzy odstęp od tekstu.
4. clear: both na stopce mówi: nie zaczynaj obok elementu floatowanego — zacznij poniżej niego.

Wynik: obraz po lewej, tekst opływa go z prawej, stopka na pełnej szerokości pod obrazem.

Przykład 2 — badge i sticky nagłówek

Karta ma dostać czerwony badge w prawym górnym rogu. Nagłówek planu lekcji ma zostać na górze panelu podczas przewijania jego zawartości.

HTML

<nav class="pasek">
  <strong>Kurs CSS</strong>
  <a href="#plan-dalej">Zobacz plan</a>
</nav>

<section class="karta">
  <span class="badge">Nowość</span>
  <h2>Pozycjonowanie w praktyce</h2>
  <p>Karta ma <strong>position: relative</strong>, a badge
     <strong>position: absolute</strong>.</p>
</section>

<div class="przewijanie">
  <h3>Plan lekcji — nagłówek sticky</h3>
  <p>1. Normalny przepływ i display.</p>
  <p>2. Float i clear.</p>
  <p>3. Position i z-index.</p>
  <p id="plan-dalej">4. Flexbox w nawigacji.</p>
</div>

CSS

.pasek {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 12px;
  background: #1e293b;
  color: #fff;
}
.pasek a { color: #c7d2fe; font-size: 14px; }
.karta {
  position: relative;
  margin-top: 30px;
  padding: 26px;
  border: 1px solid #dbe3ef;
  border-radius: 16px;
  background: #f8fafc;
}
.karta h2 { margin: 0 0 8px; font-size: 24px; }
.karta p { margin: 0; color: #475569; }
.badge {
  position: absolute;
  top: -14px;
  right: 18px;
  z-index: 2;
  padding: 6px 14px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.przewijanie {
  max-height: 210px;
  margin-top: 26px;
  overflow-y: auto;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  background: #fff;
}
.przewijanie h3 {
  position: sticky;
  top: 0;
  margin: 0;
  padding: 12px 16px;
  background: #e0e7ff;
  color: #3730a3;
  font-size: 15px;
}
.przewijanie p {
  margin: 12px 16px;
  color: #475569;
  font-size: 14px;
  scroll-margin-top: 48px;
}

podgląd w przeglądarce

1. Karta dostaje position: relative, więc staje się układem odniesienia dla dzieci.
2. Badge ma position: absolute oraz top i right — wychodzi poza górną krawędź karty.
3. Pasek nawigacji ma position: sticky; top: 0, więc podczas przewijania strony zostaje na górze.
4. Nagłówek wewnątrz panelu też jest sticky, ale przykleja się do górnej krawędzi panelu z overflow-y: auto.

Wynik: badge siedzi w rogu karty, a oba nagłówki pozostają widoczne podczas przewijania.

Przykład 3 — flexbox w nawigacji i kartach

Logo ma stać po lewej, linki po prawej. Pod nawigacją mają pojawić się cztery karty w jednym rzędzie, z równymi odstępami i możliwością zawijania.

HTML

<nav class="nawigacja">
  <strong>Wędruj z nami</strong>
  <div class="linki">
    <a href="#">Góry</a>
    <a href="#">Morze</a>
    <a href="#">Miasto</a>
  </div>
</nav>

<div class="karty">
  <article class="karta">
    <img src="../assets/gory.svg" alt="Górski pejzaż ze słońcem">
    <h3>Góry</h3>
    <p>Szlaki, schroniska i widoki.</p>
  </article>
  <article class="karta">
    <img src="../assets/morze.svg" alt="Błękitne morze i plaża">
    <h3>Morze</h3>
    <p>Plaża, fale i długie spacery.</p>
  </article>
  <article class="karta">
    <img src="../assets/las.svg" alt="Zielony las z wysokimi drzewami">
    <h3>Las</h3>
    <p>Cisza, ścieżki i świeże powietrze.</p>
  </article>
  <article class="karta">
    <img src="../assets/miasto.svg" alt="Miasto z wieżowcami o zachodzie słońca">
    <h3>Miasto</h3>
    <p>Zabytki, kawiarnie i wieczorne światła.</p>
  </article>
</div>

CSS

.nawigacja {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 14px 20px;
  border-radius: 14px;
  background: #0f172a;
  color: #fff;
}
.nawigacja a { color: #cbd5e1; font-size: 14px; }
.linki {
  display: flex;
  gap: 18px;
}
.karty {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 26px;
}
.karta {
  flex: 1 1 180px;
  overflow: hidden;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  background: #fff;
}
.karta img { display: block; width: 100%; height: 110px; object-fit: cover; }
.karta h3 { margin: 12px 14px 4px; font-size: 16px; }
.karta p { margin: 0 14px 14px; color: #64748b; font-size: 13px; }

podgląd w przeglądarce

1. display: flex na nawigacji ustawia logo i linki w jednym rzędzie.
2. justify-content: space-between odsuwa logo do lewej, a linki do prawej.
3. align-items: center wyrównuje je w pionie, a gap pilnuje odstępów.
4. flex-wrap: wrap pozwala kartom przejść do kolejnego rzędu, gdy zabraknie miejsca, a flex: 1 1 180px dzieli dostępną szerokość.

Wynik: nawigacja na pełnej szerokości, cztery równe karty w rzędzie i gotowość do zawijania na węższym ekranie.

Spróbuj samodzielnie

Rozwiąż zadania po kolei. Pierwsze jest rozgrzewką, drugie utrwala float, a kolejne przypominają zadania egzaminacyjne z gotowym kodem do poprawy.

1. Dwa elementy .box mają stać obok siebie w jednym rzędzie, mieć taką samą szerokość i odstęp 20 px. Napisz reguły CSS dla rodzica i dzieci.

   Pokaż rozwiązanie

   Rodzic dostaje flexbox, a dzieci jednakowo dzielą miejsce:

   .rodzic {
     display: flex;
     gap: 20px;
   }
   .box {
     flex: 1;
   }

   gap dodaje odstęp tylko między elementami, więc nie trzeba liczyć marginesów. flex: 1 sprawia, że oba boksy rosną równie mocno.

2. W artykule jest obraz .foto i stopka .stopka. Ustaw obraz po prawej stronie, nadaj mu szerokość 240 px i odstęp od tekstu, a stopkę ustaw poniżej obrazu. Napisz CSS.

   Pokaż rozwiązanie

   .foto {
     float: right;
     width: 240px;
     margin: 0 0 14px 20px;
   }
   .stopka {
     clear: both;
   }

   Margines 0 0 14px 20px oznacza: góra 0, prawo 0, dół 14 px, lewo 20 px. Lewy margines oddziela obraz od tekstu, który opływa go z lewej. clear: both przenosi stopkę pod element floatowany.

3. Uczeń napisał kod karty z badge. Badge pojawia się w prawym górnym rogu całej strony, a nie karty. Wskaż przyczynę i popraw kod.

   .karta {
     position: static;
     padding: 24px;
   }
   .badge {
     position: absolute;
     top: 0;
     right: 0;
   }

   Pokaż rozwiązanie

   Przyczyną jest position: static na karcie. Element absolutny szuka najbliższego przodka z pozycjonowaniem innym niż static. Gdy takiego nie ma, ustawia się względem strony.

   .karta {
     position: relative;
     padding: 24px;
   }
   .badge {
     position: absolute;
     top: 0;
     right: 0;
   }

   Wystarczy zmienić static na relative. Karta zostaje w normalnym przepływie, ale staje się układem odniesienia dla badge.

4. Zbuduj nagłówek sklepu: logo po lewej, trzy linki po prawej, wszystko w jednym rzędzie i wyrównane w pionie. Na węższym ekranie linki mają przejść pod logo. Napisz HTML i CSS bez media queries.

   Pokaż rozwiązanie

   <header class="naglowek">
     <strong>Sklep Zielony</strong>
     <nav class="linki">
       <a href="#">Oferta</a>
       <a href="#">Dostawa</a>
       <a href="#">Kontakt</a>
     </nav>
   </header>

   .naglowek {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
     gap: 12px;
   }
   .linki {
     display: flex;
     gap: 18px;
   }

   flex-wrap: wrap na głównym kontenerze pozwala grupie linków przejść do kolejnego wiersza, gdy zabraknie miejsca. justify-content: space-between rozsuwa logo i linki na boki, a align-items: center wyrównuje je w pionie.