4. Flexbox – pierwsze układy

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

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;
justify-content: flex-start | center | space-between | space-around;
align-items: stretch | center | flex-start | flex-end;
gap: 20px;                    /* row-gap + column-gap razem */

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

• 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

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)