Flexbox

Witam w sekcji o Flexboxie!

Na początku podstawy, aby zamienić kontener w element flex należy użyć:
display: flex ;
Teraz zależnie od flex-direction:

Gdyby zdarzyło się że przedmioty wyjeżdżają za pudełko,
można je automatycznie zawinąć używając:
flex-wrap: ;
wrap | nowrap | wrap-reverse
tu przykład:
Najedź na tabelkę poniżej a wartość nowrap zmieni się na wrap

Można połączyć oba powyższe style, używając skrótu flex-flow: ;

Teraz rozmieszczenie elementów!

• justify-content: ;
  Możliwe wartości: left right center;
  Użycie: Rozmieszczenie elementów na osi głównej.
• align-content: ;
  Możliwe wartości: start end center;
  Użycie: Rozmieszczenie elementów na osi poprzecznej.
• align-items: ;
  Możliwe wartości: start end center;
  Użycie: Indywidualne rozmieszczenie wszystkich elementów na osi poprzecznej.
• align-self: ;
  Możliwe wartości: start end center;
  Użycie: Indywidualne rozmieszczenie pojedynczego elementu na osi poprzecznej.

Na koniec, sterowanie rozmiarem i proporcjami!

flex-grow: num ;
Powiększa dany przedmiot flex, nie wychodząc za pojemnik,
bo odejmuje po równo od reszty przedmiotów

Najedź aby zastosować!

flex-shrink: num ;
Pomniejsza dany przedmiot flex, nie robiąc pustki,
bo dodaje po równo do reszty przedmiotów

Najedź aby zastosować!

Za pomocą flex-basis: ; można dać bazowe wymiary które grow lub shrink będzie skalować