Flexbox

Flexbox to zestaw CSS-owych deklaracji, które umożliwiają nam łatwiejsze ustawianie pozycji elementów na stronie internetowej i tworzenie elastycznego układu. Pomysł na model Flexbox pojawił się już jakiś czas przed 2008 rokiem, a pierwsza robocza wersja została opublikowana 23 lipca 2009 roku. W kolejnych latach model Flexbox był rozwijany i dostosowywany do potrzeb projektantów i programistów, aż w październiku 2017 roku została opublikowana ostatnia robocza wersja modelu Flexbox.

Flexbox wprowadza nowe właściwości CSS, które pozwalają na kontrolowanie układu elementów w jednym wymiarze - wzdłuż osi głównej (main axis) i w poprzek osi krzyżowej (cross axis). Główne właściwości Flexboxa to:

• display: flex - Określa, że elementy potomne mają korzystać z modelu Flexboxa.
• flex-direction - Określa kierunek, w którym elementy będą ułożone, czyli czy mają być ułożone w linii poziomej (row), linii pionowej (column) lub odwrócone w linii poziomej (row-reverse) lub linii pionowej (column-reverse).
• justify-content - Określa sposób rozmieszczania elementów wzdłuż osi głównej, czyli w poziomie. Możemy ustawić, aby elementy były równo rozłożone, wycentrowane, wyrównane do lewej lub prawej strony itp.
• align-items - Określa sposób rozmieszczania elementów wzdłuż osi krzyżowej, czyli w pionie. Możemy ustawić, aby elementy były wycentrowane, wyrównane do góry, do dołu itp.
• flex-grow, flex-shrink, flex-basis - Określają elastyczność i sposób dopasowania elementów, gdy nie ma wystarczającej przestrzeni na ich wyświetlenie w linii.
• align-self - Określa rozmieszczenie pojedynczego elementu wzdłuż osi krzyżowej, niezależnie od reszty elementów.

Model Flexbox jest bardzo użytecznym narzędziem w projektowaniu responsywnych układów strony, a także w zarządzaniu układem elementów w ramach konkretnych kontenerów. Dzięki elastyczności i różnorodnym możliwościom, które oferuje, Flexbox ułatwia tworzenie wyjątkowych i estetycznych układów strony internetowej. Stylowanie od wielu lat odbywało się przez właściwości float i position. Starsi programiści pamiętają strony oparte na tabelach. Miały jednak one swoje problemy i czasami stylowanie było frustrujące. Z pomocą przychodzi nam zapis display: flex;:

1section {
2  display: flex;
3}

Jak widzisz powyżej deklaracja display: flex; zadziała na selektor elementu sekcji. W naszym przypadku sekcja będzie rodzicem trzech elementów z klasą box:

1<section>
2  <div class="box">Element 1</div>
3  <div class="box">Element 2</div>
4  <div class="box">Element 3</div>
5</section>

Od samego początku możemy zobaczyć, że elementy będą ustawione obok siebie.

Kontener flex to fundament piramidy, a elementy flex to kamienie, z których piramida jest zbudowana. Tak jak kamienie można ułożyć w różny sposób, tak elementy flex można uporządkować za pomocą różnych właściwości, takich jak justify-content czy align-items.

Więcej dowiesz się w kolejnych zwojach wiedzy, a na końcu modułu czeka na Ciebie specjalna minigra (https://flexboxfroggy.com/#pl).

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Flexbox - Kontener flex</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="container">
11        <h1>Flexbox - Kontener Flex</h1>
12
13        <section class="demo-section">
14            <h2>Bez Flexbox (domyślnie)</h2>
15            <div class="no-flex">
16                <div class="item">Kamień 1</div>
17                <div class="item">Kamień 2</div>
18                <div class="item">Kamień 3</div>
19            </div>
20            <p>Elementy blokowe układają się jeden pod drugim.</p>
21        </section>
22
23        <section class="demo-section">
24            <h2>Z Flexbox (display: flex)</h2>
25            <!-- Dodaj display: flex do klasy .flex-container w style.css -->
26            <div class="flex-container">
27                <div class="item">Kamień 1</div>
28                <div class="item">Kamień 2</div>
29                <div class="item">Kamień 3</div>
30            </div>
31            <p>Po dodaniu display: flex elementy ustawiają się obok siebie.</p>
32        </section>
33
34        <section class="demo-section">
35            <h2>Praktyka: Egipska galeria</h2>
36            <div class="gallery">
37                <div class="item gallery-item">Hieroglif A</div>
38                <div class="item gallery-item">Hieroglif B</div>
39                <div class="item gallery-item">Hieroglif C</div>
40                <div class="item gallery-item">Hieroglif D</div>
41            </div>
42            <p>Spróbuj dodać display: flex do klasy .gallery w CSS!</p>
43        </section>
44    </div>
45</body>
46</html>