CSS Flexbox – responsywny layout

CSS Flexbox – responsywny układ treści

CSS Flexbox (Flexible Box) umożliwia elastyczne układanie elementów na stronie internetowej. Została zaprojektowana, aby ułatwić tworzenie złożonych układów, które automatycznie dostosowują się do różnych rozmiarów ekranów i urządzeń. W tym artykule omówimy podstawy Flexboxa, a także przedstawimy praktyczne przykłady, które pomogą zrozumieć jego działanie.

Podstawy CSS Flexbox

Flexbox składa się z dwóch głównych elementów:

1. Flex container (kontener Flexboxa) – element, który zawiera elementy podrzędne (flex items).
2. Flex items (elementy elastyczne) – elementy wewnątrz kontenera Flexboxa, które podlegają układowi Flexboxa.

Aby rozpocząć korzystanie z Flexboxa, musimy określić element kontenera jako flexbox. Dodatkowo kontener ten będzie zawierał elementy podrzędne, które chcemy układać.

HTML

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

CSS

.container {
  display: flex;
}

Właściwość display: flex; przekształca element kontenera w flexbox, a jego bezpośrednie dzieci stają się elementami flex.

W Flexboxie istnieją dwie osie:

• Oś główna (main axis) – domyślnie biegnie poziomo (od lewej do prawej).
• Oś poprzeczna (cross axis) – domyślnie biegnie pionowo (od góry do dołu).

Podstawowe właściwości flex container

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

flex-direction

.container {
  display: flex;
  flex-direction: row; /* Może być row, row-reverse, column, column-reverse */
}

Właściwość flex-direction określa kierunek osi głównej i może przyjmować następujące wartości:

row – (domyślnie) – elementy układają się w wierszu od lewej do prawej

row-reverse – elementy układają się w wierszu od prawej do lewej

column – elementy układają się w kolumnie od góry do dołu

column-reverse – elementy układają się w kolumnie od dołu do góry

flex-wrap

.container {
  display: flex;
  flex-wrap: wrap; /* Może być nowrap, wrap-reverse */
}

Właściwość flex-wrap kontroluje, czy elastyczne elementy (flex items) w kontenerze powinny zawijać się na kolejne wiersze, gdy brakuje miejsca w linii głównej (main axis). Poza tym działa w połączeniu z właściwością flex-direction, która określa kierunek osi głównej oraz przyjmuje następujące wartości:

nowrap – wszystkie elementy elastyczne będą umieszczone w jednym wierszu. Jeśli nie mieszczą się w jednej linii, mogą wychodzić poza krawędzie kontenera.

wrap – elementy będą zawijane na nowe wiersze, gdy zabraknie miejsca w jednym wierszu. Kontener dostosowuje swoją wysokość, aby pomieścić nowe wiersze.

wrap-reverse – elementy będą zawijane na nowe wiersze, ale w odwrotnym kierunku, czyli wiersze będą układane od dołu do góry (przy flex-direction: row) lub od prawej do lewej (przy flex-direction: column).

flex-flow

.container {
  display: flex;
  flex-flow: <'flex-direction'> <'flex-wrap'>;
}

Właściwość flex-flow jest skrótem łączącym dwie inne właściwości: flex-direction i flex-wrap. Dodatkowo umożliwia jednoczesne ustawienie kierunku układania elastycznych elementów oraz tego, czy mają się zawijać na nowe wiersze i mogą to być następujące wartości:

flex-direction:

• row (domyślnie) – elementy układają się w wierszu od lewej do prawej
• row-reverse – elementy układają się w wierszu od prawej do lewej
• column – elementy układają się w kolumnie od góry do dołu
• column-reverse – elementy układają się w kolumnie od dołu do góry

flex-wrap:

• nowrap (domyślnie) – elementy pozostają w jednym wierszu
• wrap – elementy zawijają się na nowe wiersze, gdy brakuje miejsca
• wrap-reverse – elementy zawijają się na nowe wiersze w odwrotnym kierunku

/* Elementy w jednym wierszu, układane od lewej do prawej */
.flex-flow-row-nowrap { flex-flow: row nowrap;
}

/* Elementy w kilku wierszach, układane od lewej do prawej */
.flex-flow-row-wrap { flex-flow: row wrap; }

/* Elementy w kilku kolumnach, układane od góry do dołu */
.flex-flow-column-wrap { flex-flow: column wrap; }

/* Elementy w kilku kolumnach, układane od dołu do góry */
.flex-flow-column-wrap-reverse { flex-flow: column wrap-reverse; }

justify-content

.container {
  display: flex;
  justify-content: center; /* Może być flex-start, flex-end, center, space-between, space-around, space-evenly */
}

Właściwość justify-content ustawia wyrównanie elementów wzdłuż osi głównej. Może przyjmować następujące wartości:

flex-start (domyślnie) – elementy są wyrównane do początku kontenera

flex-end – elementy są wyrównane do końca kontenera

center – elementy są wyśrodkowane

space-between – elementy są rozmieszczone równomiernie, pierwszy element przy początku, ostatni przy końcu

space-around – elementy są rozmieszczone równomiernie z równymi odstępami wokół nich

space-evenly – elementy są rozmieszczone równomiernie z równymi odstępami między nimi i krawędziami kontenera

align-items

.container {
  display: flex;
  align-items: center; /* Może być flex-start, flex-end, center, baseline, stretch */
}

Właściwość align-items ustawia wyrównanie elementów wzdłuż osi poprzecznej i można przypisać następujące wartości:

flex-start – elementy są wyrównane do początku kontenera wzdłuż osi poprzecznej

flex-end – elementy są wyrównane do końca kontenera wzdłuż osi poprzecznej

center – elementy są wyśrodkowane wzdłuż osi poprzecznej

baseline – elementy są wyrównane wzdłuż ich linii bazowej tekstu

stretch (domyślnie) – elementy są rozciągnięte, aby wypełnić kontener wzdłuż osi poprzecznej

align-content

.container {
  display: flex;
  align-content: flex-start; /* Może być flex-end, center, space-between, space-around, space-evenly, stretch */
}

Właściwość align-content w Flexboxie jest używana do kontrolowania rozmieszczenia i wyrównania przestrzeni między wierszami elastycznych elementów (flex items) w kontenerze, gdy zawartość nie wypełnia całej dostępnej przestrzeni wzdłuż osi poprzecznej (cross axis). Działa tylko wtedy, gdy jest więcej niż jeden wiersz elementów i możemy do niej zastosować następujące wartości:

flex-start – wiersze są wyrównane do początku kontenera

flex-end – wiersze są wyrównane do końca kontenera

center – wiersze są wyśrodkowane w kontenerze

space-between – wiersze są rozmieszczone równomiernie w kontenerze, pierwszy wiersz przy początku, ostatni przy końcu

space-around – wiersze są rozmieszczone równomiernie z równymi odstępami wokół każdego wiersza

space-evenly – wiersze są rozmieszczone równomiernie z równymi odstępami między nimi oraz między nimi a krawędziami kontenera

stretch – wiersze są rozciągnięte, aby wypełnić dostępne miejsce w kontenerze (domyślne ustawienie)

Podstawowe właściwości flex items

Elementy elastyczne, czyli flex items, to „dzieci” bezpośrednio umieszczone w kontenerze Flexboxa (flex container). Flexbox dostarcza szereg właściwości, które umożliwiają precyzyjną kontrolę nad tymi elementami w celu dostosowania ich rozmiaru, rozmieszczenia i wyrównania.

Dla elementów w HTML będziemy nadawać poniższe wartości w CSS:

<div class="container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
</div>

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

order

Właściwość order kontroluje kolejność, w jakiej elementy elastyczne są rozmieszczane w kontenerze. Domyślna wartość to 0. Elementy z niższą wartością order będą umieszczone przed elementami z wyższą wartością.

.container { display: flex; }
.item1 { order: 1; }
.item2 { order: 2; }
.item3 { order: -1; }

flex-grow

Właściwość flex-grow określa, jak elastyczny element powinien rosnąć w stosunku do pozostałych elastycznych elementów, gdy jest dodatkowe miejsce w kontenerze. Domyślna wartość to 0 (element nie rośnie).

.container { display: flex; }
.item1 { flex-grow: 1; /* Rośnie, gdy jest dodatkowe miejsce */ }
.item2 { flex-grow: 2; /* Rośnie dwa razy szybciej niż item1 */ }

flex-shrink

Właściwość flex-shrink określa, jak elastyczny element powinien się kurczyć w stosunku do pozostałych elastycznych elementów, gdy brakuje miejsca w kontenerze. Domyślna wartość to 1 (element może się kurczyć).

.container { display: flex; }
.item1 { flex-shrink: 1; /* Kurczy się, gdy brakuje miejsca */ }
.item2 { flex-shrink: 0; /* Nie kurczy się */ }

flex-basis

Właściwość flex-basis określa początkowy rozmiar elastycznego elementu przed przydzieleniem dodatkowego miejsca przez właściwości flex-grow lub flex-shrink. Może przyjmować wartości długości (np. px, em, %) lub specjalną wartość auto.

.container { display: flex; }
.item1 { flex-basis: 200px; /* Początkowy rozmiar elementu to 200px */ }
.item2 { flex-basis: 50%; /* Początkowy rozmiar elementu to 50% kontenera */ }

flex

Właściwość flex jest skrótem, który łączy flex-grow, flex-shrink i flex-basis w jedną deklarację. Umożliwia bardziej zwięzłe i czytelne definiowanie elastyczności elementów.

flex: [flex-grow] [flex-shrink] [flex-basis];

.container { display: flex; }
.item1 { flex: 1; /* równoważne z flex: 1 1 0; */ }
.item2 { flex: 2 1 100px; /* flex-grow: 2, flex-shrink: 1, flex-basis: 100px */ }

align-self

.container { display: flex; }
.item1 { align-self: flex-start; /* Wyrównany do początku osi poprzecznej */ }
.item2 { align-self: center; /* Wyśrodkowany w osi poprzecznej */ }

Właściwość align-self pozwala nadpisać ustawienie align-items dla poszczególnych elastycznych elementów. Może przyjmować te same wartości co align-items:

• flex-start
• flex-end
• center
• baseline
• stretch (domyślnie)

Przykłady Zastosowania Flexboxa

Centrowanie Elementu

Aby wycentrować pojedynczy element w kontenerze:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centrowanie Elementu</title>
    <style>
        .container {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 15vh;
          background: #ddd;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Centered</div>
    </div>
</body>
</html>

Elastyczne Kolumny

Tworzenie trzech elastycznych kolumn, które równomiernie dzielą dostępne miejsce:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Elastyczne Kolumny</title>
    <style>
        .container {
          display: flex;
          justify-content: space-between;
        }

        .item {
          flex: 1;
          margin: 0 10px; /* margines między kolumnami */
          padding: 20px;
          background: #ddd;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Column 1</div>
        <div class="item">Column 2</div>
        <div class="item">Column 3</div>
    </div>
</body>
</html>

Rozkład Kafelków

Tworzenie układu kafelkowego z elementami o zmiennej szerokości:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rozkład Kafelków</title>
    <style>
        .container {
          display: flex;
          flex-wrap: wrap;
          gap: 10px; /* odstępy między elementami */
        }

        .item {
          flex: 1 1 calc(33.333% - 10px); /* elastyczna szerokość */
          background: #ddd;
          padding: 20px;
          box-sizing: border-box;
}
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Title 1</div>
        <div class="item">Title 2</div>
        <div class="item">Title 3</div>
        <div class="item">Title 4</div>
        <div class="item">Title 5</div>
    </div>
</body>
</html>

CSS Flexbox – podsumowanie

Bez wątpienia flexbox to potężne narzędzie CSS, które ułatwia tworzenie elastycznych i responsywnych układów. Dlatego zrozumienie podstawowych właściwości, takich jak flex-direction, justify-content, i align-items, jest kluczem do efektywnego wykorzystania tej technologii. Co więcej dzięki Flexboxowi, tworzenie nowoczesnych, elastycznych layoutów staje się znacznie prostsze. Zachęcam do eksperymentowania z różnymi właściwościami Flexboxa, aby w pełni wykorzystać jego możliwości i dostosować układ strony do własnych potrzeb.