CSS: Rozmiary względne między elementami flexa

0:00Cześć!

0:00W poprzedniej lekcji omówiliśmy pokrótce problematykę osi we flex boksie.

0:06No i w tym momencie możemy przejść do

0:09relacji między elementami w kontekście ich rozmiarów.

0:13Są dwie dodatkowe właściwości Flex boxa, o których jeszcze nie wspomniałem.

0:17Mianowicie Flex scroll i Flex Swing.

0:20Możemy tutaj je zostawić i komentować.

0:22Na razie.

0:24Flex Shipping.

0:26I tak naprawdę nawet nie komentując ich.

0:31Nasz layout nie będzie się domyślnie zmieniał.

0:33Możemy tutaj wpisać dosłownie cokolwiek i te wartości.

0:38Pozornie nie zmieniają nam nic.

0:41Jeżeli wszystkie nasze elementy się mieszczą.

0:43I to jest właśnie ten kluczowy element.

0:45Bo jeżeli na flex grow

0:48ustawimy na pojedynczym elemencie, nie na kontenerze, to jest tutaj pierwszy błąd.

0:57Wszystkie Flex Group i Flex.

0:59Spinki musimy ustawić na elementach Flex,

1:02a wtedy faktycznie będziemy wpływać na ich zachowanie.

1:06Domyślnie Flex Group ma wartość 0.

1:09Flex Link ma wartość 1

1:11i to też działa podobnie na zasadzie relacji tak jak set index.

1:16Czyli jeśli wszystkie elementy mają

1:20domyślnie tę samą wartość, to tak naprawdę nie będziemy widzieli żadnej różnicy.

1:25Ale jeśli na pojedynczym elemencie np.

1:29ustawimy sobie container.

1:34Container div.

1:39N filtr.

1:40Niech to będzie czwarty element

1:43i ustawiona nim flex grow 1, to zobaczymy, że w tym danym wierszu ten

1:49element się rozszerzył, ale stało się to tylko w tym jednym wierszu.

1:52To warto zauważyć.

1:54Czyli im mamy mniej elementów w tym

1:56wierszu, tym ten element będzie teoretycznie szerszy

2:00i będzie jakby się rozciągał pomimo tego, że zadeklarowaną minimalną szerokość ma

2:04mniejszą i jeśli ustawimy to też na innym elemencie.

2:07Czyli połączymy sobie te dwie

2:10reguły, te dwa selektory, tak aby ten sam kod się wykonywał, to

2:14zobaczymy, że dwójka i czwórka faktycznie są większe niż pozostałe.

2:19Co warto zauważyć, to nie jest to

2:23relacja na zasadzie, że jeśli ustawimy flex grą 2 czy 1.

2:30Na elemencie powiedzmy nawet na wszystkich elementach.

2:33Tutaj możemy ustawić flex na 1 i wtedy flex grał na 2,

2:38na drugim i czwartym to oczywiście wszystkie elementy będą się rozszerzać.

2:41Natomiast nie znaczy to, że ten element będzie dwa razy większy.

2:45Flex i Flex 3 operują na dostępnej przestrzeni, to znaczy jeśli pozbędziemy

2:51się tych deklaracji z tych dwóch miejsc, mamy tutaj jakąś dostępną przestrzeń.

2:57Ta przestrzeń jest dystrybuowana poprzez tutaj line items czy content.

3:03Jeżeli byśmy je ustawili,

3:05ustawiając tutaj background na jakiś share, widzimy faktycznie dostępną

3:10przestrzeń w danym kontenerze, czyli cały szary box.

3:15To jest dostępna przestrzeń w tym flex systemie flex kontenerze.

3:20Już trzymając się nomenklatury, którą narzuciłem wcześniej, czyli.

3:24Jeśli element drugi.

3:29Będzie miał Flex Grow 1, to będzie on mógł

3:32wziąć tylko tyle przestrzeni ile tutaj jest wolne, bo Flex Grow

3:36rozszerza nam elementy wzdłuż main axis wzdłuż Cross Axis.

3:42Do tego używamy Lime Content i Stretch czy Elite Items i stretch.

3:48Czy jak to zapiszę, to drugi element

3:50rozciągnął się tylko o tyle, o ile pozwoliło mu na to dostępna przestrzeń.

3:55Czyli nie jest to na tyle relacja, ile coś ma być dwa razy większe od czegoś.

4:00Tylko ile razy więcej przestrzeni powinno przejmować?

4:06Czyli w tym przypadku, jeśli zrobimy to

4:09dla dwóch elementów i ustawimy flex grow H1.

4:13Wszystkie inne elementy mają flex grał 0, czyli w ogóle nie rosną, to.

4:18Ta przestrzeń zostanie równo roz roz dystrybuowana pomiędzy te dwa elementy.

4:24Co interesujące,

4:27ta dostępna przestrzeń jest też limitowana poprzez marginesy, czyli jeśli każdy z

4:32tych elementów będzie miał margines, ustawimy tutaj margin

4:36jakiś malutki, bo jeżeli damy duży, to faktycznie nic tutaj nie będzie widać.

4:40Ustawimy na zero, a zobaczymy jak to będzie wyglądać.

4:44No może troszkę za mało powiedzmy 1 albo 2.

4:49Na to już jest chyba za dużo.

4:52Na pewno jest to na tyle dużo, żeby elementy wychodziły poza sam grid

4:57container, ponieważ one mają statyczną wysokość, tak samo jak statyczną.

5:00Wysokość ma sam container.

5:02Jak to zrobimy auto, to oczywiście to już będzie zrównane.

5:08Natomiast.

5:10I w tym momencie mamy jeszcze mniej

5:12dostępnej przestrzeni niż mieliśmy wcześniej, ponieważ.

5:16Tutaj ta dostępna przestrzeń.

5:19Ona została zajęta przez te elementy i faktycznie teraz nawet widać, że ten

5:23element jest dłuższy od tego o połowę tego.

5:27Po prostu mamy. To jest cała nasza dostępna przestrzeń.

5:30Ona jest dzielona na wszystkie elementy, które mają się rozszerzyć, ale

5:34deklarując margines, ta przestrzeń jeszcze się zmniejszy.

5:38Czyli tutaj tak naprawdę.

5:41To jest cała dostępna przestrzeń dla tego wiersza.

5:44Więc jeśli ustawili byśmy to dla

5:47elementu numer 5, to ten element rozszerzy się tylko o tyle, o ile może.

5:54Odejmując od tego tutaj ten pomarańczowy margines, który znamy z box modelu,

6:00czyli dostępna przestrzeń dla tego elementu 5 To tylko tyle.

6:05Od pomarańczowego marginesu do końca tego szarego boxu.

6:10Możemy to zapisać i przetestować.

6:12No i faktycznie rozszerzył się tylko o tyle.

6:16Co ciekawe, jeśli w danym wierszu.

6:21Nie będzie drugiego elementu i ustawimy tutaj flex grow na 5.

6:26To nic się nie zmieni, ponieważ w tym

6:28danym wierszu jest tylko jeden o tej właściwości jaką jest flex.

6:31Natomiast jeśli.

6:34Zostawmy tego faktora.

6:36Natomiast jeśli w jednym wierszu będą dwie właściwości, czyli tutaj dwójka

6:41i czwórka będą miały różne wartości flex scroll.

6:45Tutaj ME2 to faktycznie ta dwójka jest w

6:48tym momencie większa od czwórki i jest większa w stosunku dwa do jednego,

6:52czyli jakby cała dostępna przestrzeń, która tam była

6:57faktycznie dostępna do tego konkretnego wiersza została podzielona na trzy.

7:01Ponieważ to jest suma wszystkich naszych

7:03flag strof i dwie trzecie z tego zabrała dwójka, a jedną trzecią czwórka.

7:10Tak działa Flex i na bardzo podobnej zasadzie działa też flex Blink.

7:15O co chodzi?

7:16Flex tricku jakby flex Swing działa wtedy, kiedy nie możemy już

7:22bardziej zwinąć naszego portu, aby wyświetlić mniej elementów.

7:26Swoją drogą Flex pozwala na tworzenie bardzo ciekawych layoutów.

7:30W prosty sposób możemy ustawić teraz wszystkiemu

7:34flex na 1, żeby to tak się nam ładnie rozszerzyło i to sobie komentujemy.

7:41Zapiszemy i teraz mamy ładne, równe elementy.

7:48Możemy też.

7:51Ustawić może troszkę większą szerokość.

7:56Tych elementów. Jakby tutaj to zrobić?

7:58Menu WF możemy ustawić na. W 100%.

8:03Zobaczymy co z tego będzie.

8:04Aż sam jestem ciekaw.

8:05No i oczywiście tutaj ten element wychodzi.

8:07Nam wychodzi nad sam kontener flexa szary, ponieważ mamy

8:11tutaj też margines, więc możemy się go pozbyć.

8:15Chyba że zostawimy margines dolny.

8:17Margin bottom Zero Warrena.

8:20No i wtedy będziemy mieli faktycznie widać różnicę między wierszami.

8:24I teraz różnica jest taka, że flex string

8:27ustawiając na danym elemencie każdy element domyślnie ma flex linka,

8:33to znaczy każdy element poniżej pewnej rozdzielczości będzie się nam zwierzał.

8:38Najłatwiej to sprawdzić pozbywając się tutaj Flex Rep.

8:42I w tym momencie każdy z tych elementów będzie miał taką szerokość i one są

8:47faktycznie węższe niż to, co było zadeklarowane w nich.

8:51Jeśli ustawimy na każdym elemencie flex String.

8:57Na zero, to prawdopodobnie nam się to nie zmieści.

9:00Sprawdźmy jak to będzie wyglądać.

9:01Oczywiście to nam wychodzi teraz poza Word całkowicie, ale jesteśmy w stanie teraz

9:05postawić na tych elementach, które tutaj chcieliśmy.

9:08Flex String z różnymi wartościami.

9:12Ja sobie tutaj to command na maku do pliku.

9:15Kursor na moje zaznaczenie i edytuję kilkukrotnie kilka linijek naraz.

9:22No i jeśli ustawimy na różnych elementach

9:25flex string na różne wartości, to on faktycznie będzie się zmniejszał z różną.

9:32Częstotliwością.

9:33Można to też odwrócić, czyli nie usuwać flag stringa z każdego z

9:38elementów, ale wyłączyć flex licznika na jednym z nich.

9:44I w tym momencie każdy jeden element będzie się zwyciężał w zależności od.

9:50Dostępnego z suportu czy tak naprawdę

9:53dostępnej przestrzeni w naszym przypadku w naszym przypadku importu.

9:57Oprócz tej piątki ta piątka, niezależnie

9:59od tego jaką mamy tutaj szerokość, zawsze będzie miała 120 pikseli szerokości.

10:06Rozszerzamy.

10:08Piątka dalej ma 120 pikseli, natomiast

10:10jedynka teraz ma 66 i 22, a teraz będzie miała 27 K1.

10:18Więc podsumowując to w skrócie Flex

10:21pozwala nam rozszerzać elementy wzdłuż danego wiersza.

10:26W przypadku gdy jest dostępna przestrzeń.

10:29Dostępną przestrzeń zajmują elementy takie jak.

10:32Generalnie model pudełkowy danego

10:35elementu HTML, czyli włączając w to padding, border, margines i tylko tyle ile

10:41jest przestrzeni zajętej i tylko tyle flex może zabrać.

10:44I nie jest to relacja rozmiarów, a relacja

10:48tego, jak dużo przestrzeni zostaje zajęte przez te elementy wobec siebie.

10:52Ten przykład z podziałem

10:55tutaj na 3 elementów gdy mieliśmy Flex Grow 1 i Flex Grow 2.

11:00Że dwójka bierze wtedy dwie trzecie całości, a jedynka jedną trzecią.

11:05Był chyba najbardziej prosty do zrozumienia.

11:08A flex String aktywuje się tylko i

11:10wyłącznie wtedy, kiedy nie ma miejsca na więcej elementów do renderowania.

11:15Czyli mamy wąski port, to możemy na danym elemencie flexa wyłączyć flex

11:20czujnika tak aby on pozostawał zawsze tej samej szerokości.

11:24To jest przydatne np.

11:25dla ikonek czy do innych elementów, które powinny mieć ten sam rozmiar paska.

11:33A flex Swing może zostać zaaplikowany do pola tekstowego, które powinno się

11:38zmniejszać wraz z zmniejszaniem się okna przeglądarki.

11:43Jeśli to zagadnienie

11:45jest dla Ciebie trudne, odsyłam Cię do kursu CSS Flex Box,

11:50a w następnej lekcji omówię problemy oraz zalety Flex Boxa w kontekscie do

11:55innych metod pozycjonowania elementów na stronie.