Pozycjonowanie elementów i proste layouty

Preview Mode

You're viewing this material in preview mode. Sign up to track your progress and access all features.

Sign Up Free Login
Pozycjonowanie elementów i proste layouty
In Progress

CSS — właściwość display i moduł Flexbox

W CSS mamy różne sposoby wpływania na rozmieszczenie elementów na stronie. Zanim poznamy zaawansowane techniki, warto zrozumieć podstawowe wartości właściwości display oraz nowoczesny moduł flexbox do budowy layoutów.

Właściwość display

Właściwość display określa sposób, w jaki elementy są wyświetlane (np. czy traktowane są jak blok czy inline). Najczęstsze wartości to:

  • display: block – wymusza zachowanie jak element blokowy (nowa linia, zajmuje całą szerokość dostępnego miejsca). Większość elementów blokowych HTML ma to domyślnie.
  • display: inline – element traktowany jest jak tekst/inny element liniowy (układa się w linii obok innych elementów, ignoruje ustawienia szerokości/wysokości). Domyślne dla elementów typu span, a, strong itd.
  • display: inline-block – łączy cechy inline i block: element nie łamie linii (stoi obok innych), ale można mu ustawić wymiary (width/height) i marginesy we wszystkich kierunkach. Inline-blocki układają się w rząd, ale zachowują się jak prostokątne pudełka (przykłady zastosowań: ikonki z podpisami, elementy menu obok siebie).

Istnieją także inne wartości, np. display: none (ukrycie elementu), display: flex (flexbox), display: grid (siatka) i inne, ale tutaj skupiamy się na powyższych podstawowych zachowaniach.

Przykłady zmiany display

/* Zmieniamy listę, by elementy 
  •  były obok siebie */
li {
    display: inline;
}

/* Zmieniamy span, by zachowywał się jak blok (każdy w osobnej linii) */
span {
    display: block;
}

    • Flexbox (flexible box model)

    Flexbox to nowoczesny sposób układania elementów w CSS3. Główna idea: definiujesz kontener z display: flex, a jego bezpośrednie dzieci stają się flex itemami, które automatycznie układają się w linii (domyślnie wierszowo) lub kolumnowo. Flexbox ułatwia kontrolę rozmieszczenia i wyrównania elementów.

    1. Wyznacz element-kontener (np. <nav> lub <div class="container">) i ustaw dla niego display: flex;.
    2. Bezpośrednie dzieci kontenera stają się elementami flex.
    3. Kontener można konfigurować przy pomocy właściwości takich jak:
      • flex-direction (np. row - wiersz, column - kolumna),
      • justify-content (wyrównanie w osi głównej — np. do lewej, środka, rozłożenie przestrzeni),
      • align-items (wyrównanie w osi poprzecznej — np. do góry, środka, do dołu).
    4. Flex-itemy mają własne właściwości, np. flex-grow lub skrócone flex, które pozwalają im rozszerzać się, by wypełnić dostępne miejsce.

    Przykład: trzy kolumny o równych proporcjach

    /* CSS */
.kontener {
    display: flex;
}
.kontener > div {
    flex: 1; /* każdy element wewnątrz kontenera flex zajmie równą część dostępnej szerokości */
    padding: 10px;
}

/* HTML */
<div class="kontener">
    <div style="background: #afa;">Kolumna 1</div>
    <div style="background: #aaf;">Kolumna 2</div>
    <div style="background: #faa;">Kolumna 3</div>
</div>

    W wyniku trzy wewnętrzne <div> ułożą się w jednym wierszu, każdy rozszerzy się, aby razem wypełnić całą szerokość rodzica (dzięki flex: 1) i każdy ma 10px paddingu. To prostsze niż dawniej stosowane metody (np. float).

    Prosty układ strony (nagłówek – menu – treść – stopka)

    Wykorzystując model pudełkowy i display, możemy zaaranżować podstawowy szkielet strony. HTML-owo może to wyglądać tak:

    <body>
    <header>Moja Witryna</header>
    <nav><!-- menu linki --></nav>
    <main><!-- główna treść --></main>
    <footer><!-- stopka --></footer>
</body>

    Domyślnie te elementy są blokami i układają się jeden pod drugim. Prosty styl CSS może wyglądać tak:

    header, footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px;
}

nav {
    background-color: #ddd;
    padding: 10px;
    /* linki w

    Dzięki temu nagłówek i stopka mają ciemne tło i biały tekst, menu ma jasnoszare tło, a sekcja main ma odstępy wewnętrzne. Layout ten jest responsywny w podstawowym sensie — elementy blokowe dopasowują się do szerokości ekranu. Flexbox można dodatkowo użyć, np. do stworzenia układu dwukolumnowego w <main> (treść + <aside>) lub do poziomego rozmieszczenia elementów menu.

    Flexbox jest obecnie podstawowym narzędziem do tworzenia layoutów, dlatego warto zacząć od prostych przykładów i stopniowo poznawać kolejne właściwości.

    Sign up to track your progress