Flexbox czyli flexible boxes. Jest to sposób tworzenia layoutu w CSS3, który umożliwia elastyczne zarządzanie elementami na stronie. Założeniem w używaniu flexbox jest podział na flex container (element nadrzędny) i flex item (bezpośrednie elementy potomne, znajdujące się wewnątrz elementu container).

Jak zacząć? Dla elementu nadrzędnego flex container dodajemy: display: flex; lub display:inline-flex;. Elementy flex item są ustawiane samoczynnie dla bezpośrednich dzieci elementu container. 

Poniżej właściwości, które możemy stosować dla flex container:

flex-direction ustala kierunek, w którym układane są flex items. Czy będą to wiersze czy kolumny. Czy w układzie od lewej do prawej, czy odwrotnie. Podobnie z kolumnami. Wartość domyślna to row.

.container {  flex-direction: row | row-reverse | column | column-reverse; }

flex-wrap określa ile wierszy ma zawierać w sobie flex container oraz kierunek.

  • nowrap – wszystkie elementy będą w jednej linii. Jest to wartość domyślna.
  • wrap – elementy item są ułożone w liniach od góry do dołu. Te, które nie mieszczą się w danej linii przechodzą do kolejnej.
  • wrap-reverse – podobnie jak wrap, zmieniana jest tylko kolejność na od dołu do góry (pierwszy element jest w dolnej linii a ostatni w pierwszej, patrząc od góry).


.container{  flex-wrap: nowrap | wrap | wrap-reverse;  }

flex-flow jest skrótem tzw. ‚shorthand’ dla flex-direction i flex-wrap. Przykładowe użycie. Elementy będą ułożone w wierszach w kierunku z prawej do lewej. Jeśli nie zmieszczą się w jednym wierszu to będą przechodziły do następnego w kolejności od góry do dołu.

.container{ flex-flow: row-reverse wrap; }

justify-content określa ułożenie wzdłuż osi X oraz sposób dystrybucji wolnej przestrzeni. Decyduje o horyzontalnym ułożeniu flex items.

.container {  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; }

align-items definiuje jak flex items rozłożone są wzdłuż Y. Decyduje o pionowym ułożeniu flex items.


.container {   align-items: stretch | flex-start | flex-end | center | baseline;}

align-content decyduje o rozmieszeniu ‚lini’ flexbox’a gdy jest ich więcej niż jedna i gdy w ramach cross axis występuje dodatkowe, niezagospodarowane miejsce.


.container {  align-content: flex-start | flex-end | center | space-between | space-around | stretch; }

Poniżej właściwości, które możemy stosować dla flex item:

flex-grow możemy określić możliwość zwiększenia rozmiarów flex items; zasada wzrostu oparta jest o proporcje.

.item {  flex-grow: <number>; }

rys.

flex-grow

flex-shrink tutaj analogicznie jak wyżej z tą różnicą, że określamy możliwość zmniejszania rozmiarów flex items.

flex-basis określa domyślny rozmiar elementów (przed dystrybucją wolnej przestrzeni). Wartość domyślna to auto.

.item {  flex-basis: <length> | auto; }

flex jest skrótem tzw. ‚shorthand’ dla flew-growflex-shrink i flex-basis. Warto używać zamiast podawania pojedynczych właściwości.

.item {   flex: none | [ <‚flex-grow’> <‚flex-shrink’>? || <‚flex-basis’> ] }

order definiuje kolejność wyświetlania flex items. Można używać wartości ujemnych, będą one wyświetlane na początku.

.item {  order: -1; }

align-self daje możliwość nadpisywania align-items lub domyślnego ułożenia dla jednego elementu.

.item {  align-self: auto | flex-start | flex-end | center | baseline | stretch; }

flex-self

Warto wiedzieć, że wszystkie właściwości związane z columns CSS nie mają wpływu na flex container. Vertical-alignfloat i clear nie oddziałują na flex item.

Wsparcie przeglądarek dla flexbox, możemy zobaczyć pod tym linkiem:

https://caniuse.com/#search=flexbox