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).