Flexbox Layout – część 1 – parent container

CSS3
Witryny i strony internetowe oparte na statycznych elementach blokowych powoli przechodzą do lamusa. Czy to koniec deklarowania kontenerów z właściwością float oraz clear? Częściowo tak, CSS3 wprowadza Flexbox Layout, który wspomaga lepsze zarządzanie elementami i łatwiejsze konstruowanie stron www.

Flexbox Layout (Flexible Box wg W3C recommendation, z 1 marca 2016 roku) to moduł, który zapewnia efektywniejszy, a co za tym idzie skuteczniejszy sposób na zarządzanie wyrównaniem, rozkładem elementów wewnątrz kontenerów, przestrzenią wokół nich oraz samymi kontenerami. Przydatne jest to zwłaszcza wtedy, gdy wielkość elementu jest nieznana lub generowana jest w sposób dynamiczny.

Flexbox Layout - Flex containerGłównym założeniem układu flex jest nadanie elementom możliwości zmiany szerokości, wysokości oraz rozmieszczenia w różnych konfiguracjach. Wszystkie te operacje wykonywane są w celu najlepszego zagospodarowania dostępnej przestrzeni, co ma poprawić widoczność oraz dostępność potrzebnych części na różnych rozdzielczościach ekranu.

Właściwości rodzica (kontener)

Flexbox Layout – Display

W ten sposób definiujemy elastyczny kontener (inline lub block) w zależności od podanej wartości. Wszystkie dzieci mogą odziedziczyć zadeklarowaną wartość flex.

Flexbox Layout – Flex direction

Właściwość flex-direction deklaruje kierunek rozmieszczenia elementów w pojemniku. W anglojęzycznej nomenklaturze używa się określenia main-axis (główna oś).

Właściwość może przyjąć następujące wartości (przy direction: ltr):

  • Flexbox Layout - Flex directionrow (wartość domyślna) – rząd od lewej do prawej
  • row-reverse – rząd od prawej do lewej
  • column – kolumna z góry do dołu
  • column-reverse – kolumna z dołu do góry

Flexbox Layout – Flex wrap

Flexbox Layout - Flex wrapDomyślnie Flex próbuje zmieścić wszystkie elementy zależne w jednej linii. W zależności od potrzeby można sterować tą właściwością za pomocą deklaracji flex-wrap.

Niezadeklarowanie właściwości flex-wrap jest równoznaczne z przybraniem domyślnej wartości nowrap. Jeżeli chcemy rozbić elementy na kolejne linie należy zadeklarować wartość wrap lub wrap-reverse, w zależności od potrzeby.

Flexbox Layout – Flex flow

Łączy flex-direction i flex-wrap w jedną właściwość.

 

Dawid Ryłko

Lubię dobre filmy, gry oraz kawę. W pracy front-end, po godzinach wszystko inne.

 
Współpraca:
Polski Front-End