DEV Community

Cover image for Flexbox Layout – część 1 – parent container
Dawid Ryłko
Dawid Ryłko

Posted on • Originally published at dawidrylko.com on

Flexbox Layout – część 1 – parent container

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.

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.

Głó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)

Flex container - kontener nadrzędny z kontenerami w środku.

Flexbox Layout - Display

.container {
  display: flex | inline-flex;
}
Enter fullscreen mode Exit fullscreen mode

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

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
Enter fullscreen mode Exit fullscreen mode

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

Flex direction - pokazano cztery opcje właściwości flex-direction: row - od lewej do prawej; row-reverse - od prawej do lewej; column - z góry do dołu; column-reverse - z dołu do góry.

  • row - (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

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
Enter fullscreen mode Exit fullscreen mode

Domyś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.

Flex wrap - rząd kontenerów zaczyna zawijać się w drugi rząd, przez co otrzymujemy dwa rzędy kontenerów.

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

.container {
  flex-flow: FLEX_DIRECTION FLEX_WRAP;
}
Enter fullscreen mode Exit fullscreen mode

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

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

The discussion has been locked. New comments can't be added.