Flexbox Layout – część 2 – children items

CSS

CSS3Rozdysponowanie elementów wewnątrz kontenera wcale nie jest takie proste. Czas na drugi wpis z serii Flexbox Layout, tym razem poświęcony potomkom kontenera – czyli children items.

Artykuł stanowi kontynuację serii. Pierwszy artykuł możesz przeczytać, klikając w: Flexbox Layout – część 1 – parent container.

Flexbox Layout - Flex itemsFlex items to wszystkie obiekty wewnątrz kontenera z zadeklarowaną wartością flex. To właśnie operacje na potomkach oraz przypisanie im odpowiednich styli sprawiają, że cały układ zachowa się w możliwie najlepszy (co za tym idzie najbardziej optymalny) sposób.

Właściwości potomka (children items)

Flexbox Layout – Order

Flexbox Layout - Flex orderStandardowo elementy w kontenerze są ułożone w kolejności występowania w pliku HTML. Kolejnością można jednak bez problemu sterować, poprzez zastosowanie właściwości order.

Flexbox Layout – Flex grow

Właściwość flex-grow umożliwia elementom powiększenie się,  jeśli tego potrzebują. Przedstawiona właściwość przyjmuje wartość numeryczną. Wartość ta jest proporcją, zadeklarowanego dla elementu miejsca, względem całego wykorzystanego miejsca wewnątrz kontenera flex.

Flexbox Layout - Flex growJeśli wszystkim elementom wewnątrz kontenera zostanie przyporządkowana właściwość flex-grow: 1,  to kontener rozdysponuje miejsce w taki sposób, aby wszystkie elementy dostały tyle samo miejsca. Jeśli zadeklarujemy wybranemu elementowi flex-grow: 2, a pozostałym flex-grow: 1, to wybrany element dostanie dwie wartości przypadające z podziału.

Ujemne wartości zostają oznaczone jako błędne.

Flexbox Layout – Flex shrink

Właściwość flex-shrink pozwala elementom na zmniejszanie się, jeśli jest to potrzebne.

Ujemne wartości zostają oznaczone jako błędne.

Flexbox Layout – Flex basis

Podstawową wielkość elementu wewnątrz flexible container uzyskujemy dzięki właściwości flex-basis. Brak zadeklarowanej wartości oznacza przyjęcie domyślnej – czyli auto. Inne wykorzystanie tej właściwości, to podanie długości – np 200px, 20em, 20% itp.

Flexbox Layout – Flex

flex jest skrótem dla flex-grow, flex-shrink oraz flex-basis. Wg rekomendacji W3C zaleca się używanie właśnie tej właściwości, zamiast deklarowania wszystkich powyższych. Ponadto przy niezadeklarowaniu wszystkich właściwości, skrót flex uzupełnia je automatycznie (kolejno 0 1 auto).

Kolejny wpis z tej serii poświęcony będzie wyrównaniu kontenera i elementów znajdujących się wewnątrz niego.

Flexbox Layout – część 1 – parent container

CSS

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