0507:

display: flex tworzy kontener

flex-direction określa kierunek w jakim elementy są rozmieszczone w kontenerze

• row (domyślne) rozmieszczenie wierszami / rozmieszczone w kierunku tekstu
• column rozmieszczenie kolumnami / rozmieszczone od góry do dołu
• row-reverse odwrócone rozmieszczenie wierszami / rozmieszczenie odwrotne do kierunku tekstu
• column-reverse odwrócone rozmieszczenie kolumnami / rozmieszczone od dołu do góry

flex-wrap zawijanie wierszy w kolumny:

• nowrap (domyślne)
• wrap zawijanie wierszy
• wrap-reverse odwrócone zawijanie wierszy

flex-flow: <flex-direction> <flex-wrap> skrócona wersja :

.flex{
  border: 4px solid #ee0c21;
  min-height: 100vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
} 

.flex{
  border: 4px solid #ee0c21;
  min-height: 100vh;
  display: flex;
  flex-flow: row wrap;
} 

justify-content ustawianie elementów wzdłuż osi flex-direction (wyrównuje elementy w poziomie jeśli flex-direction: row):

• flex-start wyrównywanie do lewej strony kontenera
• flex-end wyrównywanie do prawej strony kontenera
• center wyrównanie do środka kontenera
• space-between elementy wyświetlają się na całej szerokości kontenera z równymi odstępami pomiędzy sobą
• space-around podobnie jak space-between dodatkowo tworzy marginesy z lewej i prawej strony (taka sama przestrzeń wokół)

align-content ustawianie wierszy/kolumn wzdłuż osi przeciwnej do flex-direction (taki justify-content dla drugiej osi) / ustala odległość wierszy kontenera od siebie:

• stretch wyrównywanie wierszy tak aby dopasować się do kontenera
• flex-start wyrównywanie wierszy do górnej części kontenera
• flex-end wyrównywanie wierszy do dolnej części kontenera
• center wyrównywanie wierszy do środkowej części kontenera
• space-between wyświetlanie wierszy z równymi odstępami pomiędzy sobą
• space-around wyświetlanie wierszy z równymi odstępami dookoła siebie

align-items ustawienie elementów wzdłuż osi przeciwnej do flex-direction (w obrębie jednego wiersza, wyrównuje elementy w pionie jeśli flex-direction: row):

• stretch powiększenie elementów tak, aby wypełnić kontener
• flex-start wyrównanie do górnej krawędzi kontenera
• flex-end wyrównanie do dolnej krawędzi kontenera
• center wyśrodkowanie w pionie
• baseline wyrównanie względem dolnej krawędzi pierwszego wiersza (w elemencie) z tekstem / wyświetlenie elementów na lini odniesienia kontenera

align-content określa odstępy między wierszami, zaś align-items określa jak elementy, jako całość, wyrównują się względem kontenera. W przypadku jednej linii align-content nie przynosi żadnego efektu.

align-self ustawianie elementu wzdłuż osi przeciwnej do flex-direction - pozycjonowanie pojedyńczego elementu w wierszu:

• stretch
• flex-start
• flex-end
• center
• baseline

order: 0 liczba całkowita(-/+) kolejność pojedynczego elementu (elementy uporządkowane są od najmniejszej wartości do największej)

flex-grow: 0 liczba / proporcja rozszerzanie elementów wewnątrz wiersza flex boxa:

flex-shrink : 1 liczba / proporcja podobnie jak wyżej tylko w sytuacji zmniejszania okna

flex-basis określenie minimalnej wysokości/wysokości elementu wewnątrz kontenera flexowego:

• none
• rozmiar bazowy

flex: <flex-grow> <flex-shrink> <flex-basis> skrót powyższych właściwości:

.flex__item{
  border: 3px solid #fff;
  padding: 16px;
  text-align: center;
  background: #ffc835;
  color: #642677;
  font-weight: bold;
  font-size: 20px;
  width: 50px;
  order: 2;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 150px;
}

.flex__item{
  border: 3px solid #fff;
  padding: 16px;
  text-align: center;
  background: #ffc835;
  color: #642677;
  font-weight: bold;
  font-size: 20px;
  width: 50px;
  order: 2;
  flex: 1 0 150px;
}

---

Flexbox Froggy