4. Flexbox – pierwsze układy

Flexbox to najprostszy sposób na wyrównywanie elementów w jednym kierunku – idealnie na menu, karty, centra.

Dlaczego to ważne?

Flexbox upraszcza 1D układy, jest responsywny i zastępuje stare hacki jak float.

Podstawy Flexbox

.kontener {
  display: flex;                /* włącza flex */
  flex-direction: row;          /* domyślnie – poziomo */
  justify-content: center;      /* wyrównanie główne */
  align-items: center;          /* wyrównanie poprzeczne */
  gap: 1.5rem;                  /* odstępy między dziećmi */
}

Najważniejsze właściwości

/* na kontenerze (rodzicu) */
display: flex;
flex-direction: row | column | row-reverse | column-reverse;
justify-content: flex-start | center | space-between | space-around;
align-items: stretch | center | flex-start | flex-end;
gap: 20px;                    /* row-gap + column-gap razem */
flex-wrap: wrap;              /* zawijanie elementów */

/* na dziecku */
flex: 1;                      /* rośnie i kurczy się */
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
align-self: center;
order: 2;                     /* zmiana kolejności */

Oś główna i poprzeczna

Oś główna: pozioma (row) lub pionowa (column). Oś poprzeczna: przeciwna.

Flex vs Grid: Kiedy co?

Flex: 1D (rzędy/kolumny). Grid: 2D (siatki). Używaj Flex na menu, karty; Grid na layouty stron.

• display: flex; – włącza magię
• justify-content – oś główna (pozioma przy row)
• align-items – oś poprzeczna
• gap – nowoczesny odstęp (zamiast margin)
• flex: 1; – najczęstszy skrót na równe kolumny
• flex-wrap: wrap; – zawijanie na nową linię
• order – zmiana kolejności elementów
• place-content: center; – skrót dla justify + align

Zadanie

W pliku style.css i index.html:

• zrób poziome menu (nav) z flex i space-between
• wyśrodkuj pionowo i poziomo jedną dużą kartę na stronie
• zrób 3 karty w rzędzie, które równo się dzielą (flex: 1)
• dodaj responsywne menu z flex-wrap: wrap