Elastyczne pudełko.

Jednym ze sposobów na pozycjonowanie elementów na stronie internetowej jest metoda FLEXBOX . Układ elastyczny pozwala na dynamiczną zmianę rozmiarów elementów w przeglądarce nawet jeśli te wymiary nie są dokładnie określone. Metoda ta sprawdza się szczególnie na prostych stronach internetowych. W przypadku aplikacji lub złożonych stron internetowych, zdecydowanie lepiej skorzystać z metody GRID.

Metoda FLEX pozwala jeszcze lepiej zrozumieć relacje pomiędzy elementami nadrzędnymi i podrzędnymi (tzw. rodzice i dzieci). Na powyższym rysunku obiekt nazwany kontener jest właśnie tak zwanym rodzicem, a pudełka to dzieci. Podobnie jak dzieci naśladują swoich rodziców, tak wygląd i zachowanie elementów podrzędnych będzie częściowo dziedziczone od elementów nadrzędnych.

Podstawowe właściwości dla flexbox.

Aby przeglądarka internetowa zaczęła rozumieć poszczególne polecenia z zestawu wyświetlania elastycznego potrzebna jest właściwość display

.kontener {
display: flex;
}

Od tego momentu można dodawać szereg właściwości decydujących o położeniu elementów wewnątrz kontenera:

flex-direction - odpowiada za kierunek ułożenia elementów:

flex-direction: row; - ustawia elementy obok siebie,
flex-direction: row-reverse; - ustawia elementy obok siebie w odwrotnej kolejności.
flex-direction: column; - ustawia elementy jeden pod drugim,
flex-direction: column-reverse; - ustawia elementy jeden pod drugim w odwrotnej kolejności.

flex-wrap - odpowiada za zawijanie tekstu:

flex-wrap: nowrap; - jest to wartość domyślna, powoduje, że elementy nie są przenoszone do nowej linii gdy szerokość okna przeglądarki jest za mała aby je wyświetlić,
flex-wrap: wrap; - przenosi elementy do nowej linii jeśli zabraknie miejsca - zawijanie tekstu,
flex-wrap: wrap-reverse; - działa tak jak wrap, ale zawija tekst od dołu do góry.

justify-content - wyrównanie obiektów w poziomie:

justify-content: flex-start; - wyrównuje elementy w kontenerze od początku do końca (domyślnie od lewej do prawej),
justify-content: flex-end; - wyrównuje elementy w kontenerze od końca do początku (domyślnie od prawej do lewej),
justify-content: center; - wyrównuje elementy na środku względem osi pionowej,
justify-content: space-between; - wyrównuje elementy na środku względem osi pionowej i dodatkowo wstawia przerwę pomiędzy elementami w konteenerze,
justify-content: space-around; - wyrównuje elementy na środku względem osi pionowej i dodatkowo wstawia przerwę dookoła każdego elementu w konteenerze,
justify-content: space-evenly; - wyrównuje elementy na środku względem osi pionowej i dodatkowo wstawia równe przerwy pomiędzy elementy w konteenerze,

Warto znać jeszcze jeden parametr: safe - sprawia on, że niezależnie od zastosowanego rodzaju pozycjonowania, niemożliwe jest, aby element w kontenerze wyrenderował się częściowo lub całkowicie poza nim:
justify-content: safe;

align-items - wyrównanie obiektów w pionie:

align-items: stretch; - rozciąga aby wypełnić pojemnik przestrzegając wartości minimalnych i maksymalnych,
align-items: flex-start; - wyrównuje elementy w kontenerze od początku do końca względem osi poprzecznej,
align-items: flex-end; - wyrównuje elementy w kontenerze od końca do początku względem osi poprzecznej,
align-items: center; - wyśrodkowuje elementy w kontenerze względem osi poprzecznej,