it
Średniozaawansowany
+25 XP

👋 Zacznij uczyć się JavaScript już teraz — za darmo!

Zaloguj się
📖

Elementy flex i flex: 1

flex-grow, flex-shrink, flex-basis i skrót

Trzy właściwości elementów flex

Na samych elementach (nie na kontenerze) możesz ustawić:

css
.item {
  flex-grow: 1;    /* jak bardzo element może ROSNĄĆ (zajmować wolną przestrzeń) */
  flex-shrink: 1;  /* jak bardzo może się KURCZYĆ gdy brakuje miejsca */
  flex-basis: 0;   /* rozmiar początkowy przed rozdysponowaniem wolnej przestrzeni */
}

/* Skrót: flex: grow shrink basis */
.item { flex: 1 1 0; }
.item { flex: 1; }       /* = flex: 1 1 0 — najczęstszy */
.item { flex: none; }   /* = flex: 0 0 auto — element nie rośnie ani nie kurczy się */

flex: 1 — najpopularniejsza wartość. Wszystkie elementy z flex: 1 zajmują równą część wolnej przestrzeni.

css
💬

flex: 0 0 280px — pasek boczny zawsze ma 280px (nie rośnie ani nie kurczy się). flex: 1 dla zawartości — zajmuje wszystko co zostało.

Pamiętaj: flex: 1 = 'zajmij wszystkie dostępne miejsce'. To najbardziej przydatna właściwość elementów flex. Wiele elementów z flex: 1 = równe kolumny.

Komentarze

Zaloguj się lub Zacznij aby zostawić komentarz.