Na skróty
W języku CSS istnieją skrócone formy zapisu niektórych właściwości, które pozwalają określić elastyczność i układ elementów w modelu Flexbox. Oto opis dwóch takich skróconych definicji:
- Właściwość "flex" pozwala jednocześnie określić trzy wartości: "flex-grow", "flex-shrink" i "flex-basis".
- Wartość "flex-grow" określa, jak element ma się rozszerzać, jeśli jest taka potrzeba.
- Wartość "flex-shrink" określa, jak element ma się kurczyć, jeśli jest taka potrzeba.
- Wartość "flex-basis" określa początkowy rozmiar elementu przed uwzględnieniem rozszerzania lub kurczenia się.
Składnia skrócona "flex" wygląda następująco: flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
Przykładowe zastosowanie tej składni: .box { flex: 1 0 200px; }
W powyższym przykładzie element o klasie "box" ma wartość "flex-grow: 1", co oznacza, że ma możliwość rozszerzania się, "flex-shrink: 0", co oznacza, że nie może się kurczyć, oraz "flex-basis: 200px", co oznacza, że jego początkowy rozmiar wynosi 200 pikseli.
- Właściwość "flex-flow" pozwala jednocześnie określić wartości dla "flex-direction" i "flex-wrap".
- Wartość "flex-direction" określa kierunek, w jakim elementy są rozmieszczane w kontenerze flexbox.
- Wartość "flex-wrap" określa, czy elementy mają zawijać się na nową linię, gdy brakuje miejsca w kontenerze.
Składnia skrócona "flex-flow" wygląda następująco: flex-flow: <'flex-direction'> || <'flex-wrap'>
Przykładowe zastosowanie tej składni: .container { flex-flow: column wrap; }
W powyższym przykładzie dla kontenera o klasie "container" ustawiono wartość "flex-direction: column", co oznacza, że elementy są rozmieszczane w pionie, oraz "flex-wrap: wrap", co oznacza, że elementy będą zawijać się na nową linię, gdy brakuje miejsca w kontenerze.
Dzięki skróconym formom zapisu można bardziej zwięźle określić właściwości dotyczące elastyczności i układu elementów w modelu Flexbox, co przyczynia się do czytelności i uproszczenia kodu CSS.