Flexbox – zasady działania

/* Włączenie Flexbox */
.container {
    display: flex; /* Kontener staje się flex container */
}

/* Kierunek osi głównej */
.row {
    flex-direction: row;         /* Domyślnie: elementy w wierszu (→) */
}

.row-reverse {
    flex-direction: row-reverse; /* Elementy w wierszu od prawej (←) */
}

.column {
    flex-direction: column;      /* Elementy w kolumnie (↓) */
}

.column-reverse {
    flex-direction: column-reverse; /* Elementy w kolumnie od dołu (↑) */
}

/* Zawijanie elementów */
.wrap {
    flex-wrap: wrap;      /* Elementy zawijają się do nowej linii */
}

.nowrap {
    flex-wrap: nowrap;    /* Domyślnie: wszystkie w jednej linii */
}

/* Skrót: flex-direction + flex-wrap */
.container {
    flex-flow: row wrap;
}

/* justify-content - rozmieszczenie wzdłuż OSI GŁÓWNEJ */

.flex-start {
    justify-content: flex-start;    /* Elementy na początku (domyślnie) */
}

.flex-end {
    justify-content: flex-end;      /* Elementy na końcu */
}

.center {
    justify-content: center;        /* Elementy na środku */
}

.space-between {
    justify-content: space-between; /* Pierwszy i ostatni przy krawędziach,
                                       reszta równomiernie */
}

.space-around {
    justify-content: space-around;  /* Równe odstępy wokół każdego elementu */
}

.space-evenly {
    justify-content: space-evenly;  /* Identyczne odstępy między wszystkimi */
}

/* Przykład praktyczny: nawigacja */
.navbar {
    display: flex;
    justify-content: space-between; /* Logo po lewej, menu po prawej */
    align-items: center;
    padding: 1rem;
}

/* align-items - wyrównanie wzdłuż OSI POPRZECZNEJ */

.container {
    display: flex;
    height: 200px; /* Potrzebna wysokość, by zobaczyć efekt */
}

.stretch {
    align-items: stretch;    /* Elementy rozciągają się (domyślnie) */
}

.flex-start {
    align-items: flex-start; /* Elementy u góry */
}

.flex-end {
    align-items: flex-end;   /* Elementy na dole */
}

.center {
    align-items: center;     /* Elementy na środku (pionowo) */
}

.baseline {
    align-items: baseline;   /* Wyrównanie do linii bazowej tekstu */
}

/* IDEALNE CENTROWANIE - jeden z najważniejszych wzorców! */
.perfect-center {
    display: flex;
    justify-content: center; /* Środek poziomo */
    align-items: center;     /* Środek pionowo */
    height: 100vh;           /* Pełna wysokość ekranu */
}

/* Właściwości elementów flex (flex items) */

.item {
    /* flex-grow: ile dodatkowej przestrzeni element zabiera */
    flex-grow: 0;    /* Domyślnie: nie rośnie */
    flex-grow: 1;    /* Zabiera dostępną przestrzeń */
    flex-grow: 2;    /* Zabiera 2x więcej niż element z flex-grow: 1 */

    /* flex-shrink: jak bardzo element się kurczy */
    flex-shrink: 1;  /* Domyślnie: kurczy się proporcjonalnie */
    flex-shrink: 0;  /* Nie kurczy się wcale */

    /* flex-basis: początkowy rozmiar przed grow/shrink */
    flex-basis: auto;   /* Domyślnie: rozmiar z width/height */
    flex-basis: 200px;  /* Stały rozmiar początkowy */
    flex-basis: 25%;    /* Procent kontenera */
}

/* Skrót: flex (grow shrink basis) */
.item-grow {
    flex: 1;           /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
}

.item-fixed {
    flex: 0 0 200px;   /* Stała szerokość 200px, nie rośnie, nie kurczy się */
}

/* align-self: nadpisuje align-items dla jednego elementu */
.item-special {
    align-self: flex-end; /* Ten element na dole, reszta wg align-items */
}

/* Kolejność elementów */
.item-first {
    order: -1;  /* Wyświetlany jako pierwszy (domyślnie order: 0) */
}

/* LAYOUT 1: Trzy równe kolumny */
.three-columns {
    display: flex;
    gap: 1rem;
}

.three-columns .column {
    flex: 1; /* Każda kolumna równa szerokość */
}

/* LAYOUT 2: Sidebar + Main Content */
.layout {
    display: flex;
}

.sidebar {
    flex: 0 0 250px; /* Stała szerokość 250px */
}

.main-content {
    flex: 1; /* Reszta dostępnej przestrzeni */
}

/* LAYOUT 3: Karty produktów z zawijaniem */
.products {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.product-card {
    flex: 0 0 calc(33.333% - 1rem); /* 3 w rzędzie z uwzględnieniem gap */
}

/* LAYOUT 4: Footer z trzema sekcjami */
.footer {
    display: flex;
    justify-content: space-between;
}

.footer-section {
    flex: 1;
    padding: 1rem;
}

/* LAYOUT 5: Nawigacja */
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}

.nav-logo {
    flex: 0 0 auto; /* Logo nie rośnie ani nie kurczy się */
}

.nav-menu {
    display: flex;
    gap: 2rem;
    list-style: none;
}