Generator flexboxa CSS

Właściwości kontenera

Właściwości elementu

Trik flex: 1

flex: 1 to skrót od flex: 1 1 0%. Sprawia, że element:

• Rośnie, by wypełnić dostępną przestrzeń (grow: 1)
• Kurczy się, jeśli konieczne (shrink: 1)
• Startuje od rozmiaru zerowego (basis: 0%)

Dla kolumn o równej szerokości flex: 1 na każdym elemencie daje idealny podział. Dla sidebarów, które nie powinny kurczyć się poniżej treści, użyj flex: 0 0 240px (bez wzrostu, bez kurczenia, basis 240px).

Częste wzorce

Wyśrodkowane hero

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Navbar z logo po lewej, linkami po prawej

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links {
  margin-left: auto;  /* zepchnij w prawo */
  display: flex;
  gap: 1rem;
}

Responsywny wiersz kart

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.card {
  flex: 1 1 260px;  /* grow/shrink, 260px minimum przed zawinięciem */
}

Pole formularza z przyciskiem (input elastyczny, przycisk stały)

.field {
  display: flex;
  gap: 0.5rem;
}
.field input {
  flex: 1;
}
.field button {
  flex: 0 0 auto;
}

Flexbox vs Grid

• Flexbox: jeden wymiar (wiersz LUB kolumna). Najlepiej, gdy rozmiary elementów są zależne od treści albo gdy dystrybuujesz przestrzeń wzdłuż pojedynczej linii.
• Grid: dwa wymiary (wiersze ORAZ kolumny z jawnymi torami). Najlepiej, gdy układ ma jednocześnie strukturę wierszy i kolumn.

Dla paska nawigacji albo stosu kart: Flexbox. Dla siatki kart produktowych z wieloma rzędami wyrównanych kart: CSS Grid. Wiele realnych stron używa obu, układ strony w Grid z Flexboxem w komponentach.

Częste pułapki

• Elementy nie wypełniają kontenera: domyślny align-items: stretch stosuje się tylko, jeśli elementy nie mają stałej wysokości. Z jawną wysokością zostają w tym rozmiarze.
• gap nie działa: sprawdź wsparcie przeglądarki. Flex gap pojawił się późno; Safari <14.1 go nie obsługiwało. Teraz uniwersalne w 2024+.
• Dzieci kolumny flex się zwijają: kolumna flex ma align-items: stretch jako domyślne, co rozciąga elementy do szerokości kontenera. Jeśli jedno dziecko ustawia szerokość, wyłamuje się.
• order jest tylko wizualne: czytniki ekranu i nawigacja klawiaturą podążają za kolejnością DOM. Nie używaj order, by treść miała sens; używaj tylko do wizualnego dopieszczenia.