Flexbox – elastyczny model skrzynkowy

CSS Flex Box Layout (wł. Flexible Box) – moduł zapewniający efektywniejszy i skuteczniejszy sposób na zarządzanie wyrównaniem, rozkładem elementów wewnątrz kontenerów oraz samymi kontenerami. Głównym założeniem flexboxa jest nadanie elementom możliwości zmiany szerokości, wysokości oraz rozmieszczenia w różnych konfiguracjach

Dzięki flex można łatwiej przygotować responsywny układ strony bez konieczności używania float i position.

Flexbox to nie układ blokowy i w odniesieniu do niego nie zadziałają:
float, clear, vertical-align, :first-line, :first-letter

Definiowanie kontenera

Przede wszystkim należy zdefiniować:

• flex container (kontener),
• flex items (elementy) znajdą się wewnątrz.

Konieczne są: pojemnik zewnętrzny i wewnętrzne elementy, które będą układane flexem. Pojemnik musi mieć display wybrane na flex (lub inline-flex) i wtedy każdy element, który się w nim znajdzie automatycznie będzie podlegał ustawieniom flex.

Dodatkowe opcje to: flex-direction flex-wrap flex-flow justify-content align-items align-content

Aby zacząć korzystać z Flexbox, należy zedefiniować element, który stanie się kontenerem, który opakowuje wszystkie elementy potomne w następujący sposób:

Kontener staje się elastyczny przez przestawienie właściwości display na flex:

Oto rezultat:

Cechy dotyczace kontenera (rodzica)

1) flex-direction określa jak dzieci ułożone są w linii main-axis, czyli w osi głównej. Ustala kierunek. Możliwe wartości:

• row (wart. domyślna) – w kierunku pisania, tak jak oś główna,
• row-reverse – w kierunku odwrotnym do powyższego,
• column – układ kolumnowy, z góry na dół,
• column-reverse – z dołu do góry.

2) flex-wrap określa czy dzieci będą przechodzić do nowej linii czy nie i w jakiej kolejności.

• nowrap (wart. domyślna) – dzieci muszą się zmieścić w jednej linii, będą się zwężać,
• wrap – przy braku miejsca, przejdą do linii poniżej, pierwszy pojemnik w niższej linii ustawi się z lewej strony (w miejscu main-start), kolejne ustawią się po jego prawej stronie,

• wrap-reverse – jak w wrap, pojemniki przechodzą do nowej linii, ale ustawiają się w odwrotnej kolejności.

3) flex-flow to skrót – zawiera w sobie flex-direction i flex-wrap np. div { flex-flow: column wrap; }.

4) justify-content – wyrównanie w poziomie

• flex-start (wart. domyślna) – wyrównanie elementów od początku pojemnika
• flex-end – wyrównanie elementów od końca pojemnika
• center – wyśrodkowanie
• space-between – pojemniki układają się od początku kontenera i odpowiednio zwiększają się (lub zmniejszają) odstęp pomiędzy poszczególnymi elementami pojemnika, nie ma odstępu przy brzegach.
• space-around – odstępy pomiędzy pojemnikami takie same a odstęp od lewej i prawej strony kontenera to połowa wartości odstępu między pojemnikami,

5) align-items określa wyrównanie pojemników w pionie.

• flex-start – elementy wyrównują się do linii cross-start,
• flex-end – elementy wyrównują się do linii cross-end,
• center – wyrównują się do środka zachowując rozmiar,
• stretch (wart. domyślna) – rozszerzają się od cross-start do cross-end bez względu na zawartość,
• baseline – wyrównanie do linii bazowej każdego pojemnika.

6) align-content: wyrównuje skrzyneczki flex-containera w osi głównej, ustawia je w pionie kiedy jest więcej niż jedna linia.

• flex-start – wyrównuje linie (wiersze) do góry, do linii cross-start,
• flex-end – wyrównuje je do linii cross-end; wolna przestrzeń pozostaje na górze,
• center – wyrównuje w pionie do środka flex-containera,
• stretch (wart. domyślna) – wszystkie elementy są rozciągnięte i mają jednakową wysokość.
• space-between – pierwsza linia jest przyczepiona do cross-start, ostatnia do cross-end a środkowa (nieparzysta) jest w centrum,
• space-around – dodaje przestrzeń między każdą linią,

Cechy dotyczace pojemników (dzieci)

1) align-self: pionowe wyrównanie skrzyneczek (flex items) wewnętrznego kontenera ()

• stretch (wart. domyślna) – równomiernie rozciągnięty
• flex-start – do góry
• flex-end – do dołu
• center – do środka
• baseline – do linii bazowej

Pojemniki 1, 2 3 mają atrybut align-self odpowiednio ustawiony na : flex-start, center i flex-end powoduje, że ich wysokość, nie zostaje rozciągnięta do rozmiaru pojemnika tylko zachowuje automatyczną wysokość zależną od zawartości i jest wyrównana w pionie do góry, środka i dołu w stosunku do pozostałych.

2) order: (wart. domyślna 0) umożliwia zmianę domyślnej kolejności wyświetlania się dzieci (innej niż została zapisana w kodzie).

Jeśli np. trzeciej zakładce w poziomym menu przypiszemy order: -1; to pojawi się ona wcześniej niż wszystkie pozostałe, konkretnie przed pierwszą.

3) flex-grow: (wart. domyślna 0) – określa, o ile pojemnik wzrośnie w stosunku do pozostałych pojemników elastycznych w tym samym kontenerze. Wartością jest numer i określa proporcje w jakich jeden z elementów będzie rósł względem pozostałych przy rozszerzaniu okna.

Np. flex-grow: 2; – pojemnik otrzymuje szerokość 2 razy większą od pozostałych, jeżeli pozostałe pojemniki mają parametr style=”flex-grow:1”, wtedy zachowują wyjściową szerokość, jeżeli nie, mogą być zwężone po to aby ten, który ma ustawienie flex-grow:2 rzeczywiście miał 2 razy większą szerokość od pozostałych i żeby wszyscy zmieścili się w u kontenerze.

4) flex-shrink: (domyślnie: 1) zmniejszanie procentowe szerokości wszystkich pojemników, tak, żeby zmieściły się w kontenerze. Wartością jest numer i określa proporcje w jakich jeden z elementów będzie się kurczył względem pozostałych przy zwężaniu okna.

Np. align-items: stretch i flex-shrink:0. Atrybut align-items:stretch, powoduje dopasowanie rozmiarów pojemników wewnętrznych, odpowiednio zwężając je tak aby wszyscy zmieścili się w rzędzie, jeżeli jedne z nich ma ustawienie: style=”flex-shrink:0”, to ten pojemnik nie zostaje zwężony i zachowuje wyjściową szerokość.

5) flex-basis (domyślnie auto) dla wybranego pojemnika ustala konkretny rozmiar [auto, długość (np. px) lub %]. Np. style=”flex-basis:300px;”

6) flex: (domyślnie 0 1 auto) – jedno-liniowy zapis dla flex-grow, flex-shrink, flex-basis.

Np. polecenie style="flex: 0 0 300px;" dla drugiego pojemnika, pierwsze 0 odwołuje się do flex-grow:0, czyli ma nie być zwiększany, drugie 0 do flex-shrink, czyli ma nie być zmniejszany, a 300px do flex-basis czyli podaje jego konkretną szerokość.
Możemy również użyć zapisu flex:25% co oznacza, że flex-grow i flex-shrink mają wartości domyślne.

Przykładowy kod CSS dla kontenera i trzech elementów: