Flexbox: Notacja skrócona

0:00Cześć witam cię w kolejnej lekcji z kursu flexbox od

0:04podstaw i tym razem opowiem ci troszkę o shorthand czyli

0:08właściwościach które są tak naprawdę skrótami dla innych właściwości

0:13i pierwszą taką właściwością jest flex-flow który

0:17ustawia właściwości dla kontenera flexboxa czyli

0:21wpisując flex-flow mamy możliwość ustawienia flex-direction

0:26oraz flex-wrap

0:31w takim formacie flex-flow

0:35przyjmuje parametry czyli jeśli teraz wpiszemy

0:39flex-flow powiedzmy column

0:43wrap to elementy

0:47będą kolumnowo no i oczywiście będą się zawijać jeśli

0:52będzie zbyt mało miejsca jeśli zmienimy

0:56to na column-reverse wrap to

1:00oczywiście kierunek osi podstawowej zostanie odwrócony

1:05no i oczywiście zawijanie wierszy dalej będzie

1:09aktywne jeśli odwrócimy sobie wrap na wrap-reverse

1:14to tak samo oś przeciwstawna zmieni kierunek elementy

1:19dalej będą zawijane no i oczywiście możemy analogicznie ustawiać

1:23wartości powiązane dla row więc jest to bardzo wygodne jeśli już

1:27dobrze czujemy się z flexboxem i chcemy oszczędzić te kilka

1:32bajtów przy wysyłaniu kodu do faktycznych użytkowników

1:36bądź po prostu chcemy szybko sprototypować konkretny

1:41layout w kontekście oszczędzania bajtów tutaj bym nie kierował

1:45się używając shorthand'ów ponieważ są do tego osobne narzędzia takie jak task-runner'y

1:49na przykład gulp bądź odpowiednie pluginy do webpacka więc

1:54kod który będziemy pisali i tak będzie minificowany zanim zostanie wysłany

1:58do użytkowników a my możemy pisać w ten jawny

2:03sposób który będzie na pewno prostszy

2:07do przyswojenia ja tutaj zaadoptuje

2:13obecne rozwiązanie czyli przepisze flex-flow na row

2:17nowrap tak żeby pasował naszemu obecnemu

2:21ustawieniu skóry i te właściwe gdy wykomentuje oczywiście

2:25wszystko wygląda dalej tak samo nawet jeżeli byśmy wpisali tutaj inne wartości

2:30niż domyślna przykład row-reverse to flex-flow faktycznie

2:34działa analogiczną do flex-flow właściwością dla dzieci

2:38które są pozycjonowane flexboxem jest

2:43właściwość flex po prostu flex bez niczego

2:48i flex ma taką składnię że pierwszym argumentem jest flex-grow

2:52drugim jest flex-shrink a trzecim jest

2:57flex-basis my tutaj mamy tylko

3:01i wyłącznie ustawione flex-basis na wartość nie domyślną w

3:05naszym przypadku na każdej naszej karcie więc może też ten

3:09shorthand więc może ten shorthand nie ma tutaj tak

3:14dużego sensu natomiast jeśli chcielibyśmy to przepisać tak aby nie

3:18używać tego flex-basis tylko shorthanda moglibyśmy wpisać flex tutaj

3:23zero jako domyślna wartość dla flex-grow flex-shrink

3:28na 1 jako domyślna wartość dla flex-shrink no

3:33i flex-basis na 100 pikseli jako wartość dla

3:37flex-basis i teraz jak wykomentujemy oczywiście to flex-basis to wszystko działa w ten sam sposób natomiast

3:42jeśli chcielibyśmy aby wszystkie elementy flexa

3:46domyślnie rosły i na przykład nie kruszyły się możemy to zapisać w

3:50ten sposób i możemy również pominąć właściwość flex-shrink

3:54zostawiając zapis w tej postaci czyli pierwszy

3:58parametr musi być liczbą naturalną i jeśli drugi

4:03parametr jest wartością określającą

4:07rozmiar czyli na przykład 100 pikseli 100% 100 viewport height i

4:11tak dalej to wtedy flex-basis zostanie zaaplikowane

4:15jako drugie i to tyle jeśli chodzi o shorthandy we flexboxie są

4:20to po prostu zapisy skrócone właściwości które już dobrze znasz

4:24jeśli chcesz spróbuj przepisać jeden z

4:28poprzednich przykładów bądź własny projekt tak by używał on

4:32wyżej wymienionych shorthandów natomiast poza

4:36ćwiczeniami nie używaj ich na siłę do usłyszenia w kolejnej lekcji