CSS Flexbox

Najważniejsze właściwości CSS Flexbox:

1. Kontener elastyczny (display: flex):

• flex-direction: row (domyślnie), column, row-reverse, column-reverse
• justify-content: wyrównanie wzdłuż osi głównej (flex-start, center, flex-end, space-between, space-around, space-evenly)
• align-items: wyrównanie wzdłuż osi poprzecznej (stretch (domyślnie), center, flex-start, flex-end)
• flex-wrap: zawijanie wierszy (nowrap, wrap)
• gap: odstęp między elementami potomnymi

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

2. Elementy potomne (flex items):

• flex-grow: określa, ile dostępnej przestrzeni może zająć element (np. 1).
• flex-shrink: zdolność elementu do kurczenia się przy braku miejsca.
• flex-basis: domyślny rozmiar początkowy elementu przed dystrybucją przestrzeni.
• align-self: nadpisuje align-items dla konkretnego wybranego elementu.

Najczęstsze pułapki na egzaminie INF.03:

• Pamiętaj: justify-content zawsze steruje osią główną (dla flex-direction: column osią główną staje się oś pionowa!).