Flexbox: Porady odnośnie marginesów

0:00Hej witam cię w kolejnej lekcji z kursu flexbox od podstaw i

0:04tym razem powiem co nieco o marginesach jak

0:08już wiesz flexbox działa na podstawie dostępnej przestrzeni i

0:12tak jak ustawimy sobie justify-content na flex-start tak

0:17elementy które będą miały jakąś dostępną przestrzeń w

0:21danej osi flexboxa będą ustawiały się na początku osi

0:26main axis analogicznie jeśli ustawimy tutaj jako

0:31wartość center elementy będą wycentrowane wzdłuż tej osi dzieje się

0:36tak gdy faktycznie mamy dostępną przestrzeń w danej linii i

0:40możemy te elementy tak ustawić przestrzeń zajmują

0:45zarówno same rozmiary elementu ustawione przez flex-basis czy

0:49width czy height oraz oczywiście flex-grow czy flex-shrink

0:53które jeszcze te wartości modyfikują natomiast

0:57bardzo ważnym czynnikiem jest sam margines margines

1:02czyli część modelu pudełkowego na stronach www zachowuje

1:06się dość specyficznie w przypadku używania go równolegle

1:10z flexboxem więc przejdźmy do przykładu na

1:14pierwszej karcie ustawię

1:21margin-right na 50 pikseli i

1:26tu nie ma tak naprawdę nic dziwnego ponieważ ta karta zajęła

1:30dodatkowe 50 pikseli z prawej strony karty

1:34są układane w ten sposób że są dociągnięte do początku

1:38osi main axis no i oczywiście jeśli już się nie mieszczą

1:42no to są przerzucane do następnych linii natomiast jak będzie teraz wyglądała

1:46sytuacja jeśli zmienimy margin right na

1:50auto widzimy pojawiła się jakaś tutaj dziwna

1:54odległość jeśli ją zmierzymy wyszło że

1:58to jest 32 możemy od tego odjąć 5 pikseli

2:03jako margines karty numer 2 no więc to jest 27

2:07pikseli to nie jest jakaś wartość którą możemy w prosty sposób określić

2:11więc przejdźmy dalej i zobaczymy co do czego dojdziemy na

2:17karcie drugiej ustawimy margin-right

2:23na powiedzmy 200 pikseli

2:27jak widzisz karta zajęła 200 pikseli odstępu

2:32z prawej strony i odstęp z prawej strony karty

2:36numer 1 również się zmienił jest w tym momencie wyższy o co

2:41tutaj chodzi w specyfikacji flexboxa można wyczytać

2:46że ustawianie marginesu z dowolnej strony na

2:50elemencie flexboxa na dziecku spowoduje że

2:54element ten zostanie odepchnięty z tamtej strony jeśli

2:59wartość tego marginesu będzie wynosiła auto czyli innymi słowy my

3:04tutaj ustawiliśmy na drugiej karcie margines 200 pikseli jawnie i

3:08tyle druga karta zajęła przestrzeni natomiast ustawiając

3:13margin-right auto na karcie pierwszej ten element zajął

3:17całą dostępną przestrzeń w tej danej linii flexboxa i został

3:21dociągnięty do lewej strony ekranu ponieważ wstawiliśmy tutaj

3:25margin-right jeśli wpiszemy tutaj margin-left to

3:30zobacz że karta numer 2 dalej ma swoje 200 pikseli natomiast

3:35karta numer 1 tą nadmiarową przestrzeń która została

3:39w tej linii wykorzystała aby dociągnąć się do prawej czyli

3:44odpycha się od lewej strony i

3:48zwróć uwagę że to dalej działa w momencie kiedy mamy ustawiony justify-content

3:52na flex-start czyli kolejne linie na których elementy

3:56nie mają już modyfikowanego marginesu zachowują się tak samo czyli są

4:01układane wzdłuż konkretnej linii flexboxa od

4:05jego początku czyli możemy dojść do wniosku że operując na marginesie możemy

4:10w inny sposób pozycjonować poszczególne linie flexboxa wzdłuż

4:14osi main axis zobrazujemy to w inny sposób powiedzmy

4:18że na razie to wykomentujemy margin-right na pierwszej karcie

4:22ustawimy w ten sposób aby wszystkie pozostałe elementy oprócz

4:26tej jedynki zostały wypchnięte do następnej linii aby to zrobić możemy użyć

4:30funkcji calc i jako parametr podać 100%

4:34i odjąć od tego szerokość naszej karty w

4:39tym momencie wszystkie elementy po tej jedynce zostaną

4:44wypchnięte do następnej linii one tutaj są troszkę nierówno ponieważ

4:48my odejmujemy tylko szerokość karty i nie wliczamy w to prawego

4:53marginesu który tam mieliśmy ustawiony więc zaadaptujemy

4:57tą wartość tak aby ten margines tam był teraz oczywiście jest wszystko

5:01równo więc jeśli miałbyś bądź miałabyś

5:05sytuację że chcesz aby poszczególny element był

5:09jako jedyny w linii i nie chcesz aby urósł on zajmując

5:13całą linię możesz do tego użyć właśnie funkcji calc i

5:17odpowiedniego kierunku marginesu przejdźmy dalej i na karcie

5:22drugiej ustawmy we wszystkich kierunkach margin

5:27automatyczny jak widzisz dostępna przestrzeń która była

5:31dotychczas rozdystrybuowana w ten sposób że znajdowała się po prawej

5:35stronie tego kontenera została rozdystrybuowana

5:40w ten sposób że karta numer 2 ma po lewej stronie i po

5:44prawej stronie taki sam odstęp pomijając to że karta numer 3 dalej

5:48ma tutaj te swoje 5 pikseli dlatego wizualnie nie jest

5:52to równe natomiast fizycznie faktycznie karta numer 2 ma po lewej

5:56i po prawej ten sam odstęp jeśli zmienimy troszkę tę sytuację i ten

6:01margin-right ustawimy na karcie numer 4 to

6:06zobacz co w tym momencie stało się naszym layoutem karta numer 4 zrobiła

6:11dokładnie to samo co robiła wcześniej karta numer 1 czyli zadeklarowała

6:16tyle marginesu aby zmieściła się ona jako

6:20jedyna tej konkretnej linii flexboxa dlatego karta 5

6:24i 6 są w następnej linii natomiast one nie są modyfikowane więc są układane

6:28zgodnie z justify-content ale karta numer 2

6:33jest wycentrowana pomiędzy kartą

6:371 i numer 3 więc ta linia wygląda jakby była wypozycjonowana

6:41za pomocą justify-content space-between pomimo

6:45tego że faktycznie tak nie jest ponieważ jak widzimy justify-content

6:50jest ustawiona na flex-start i dzieje się to właśnie dlatego że z

6:55lewej i z prawej strony ustawiony jest margines automatyczny

6:59więc karta deklaruje równy odstęp z

7:04obu stron i dzięki czemu jest wycentrowana jeśli

7:09ustawimy sobie line content na stretch i

7:14usuniemy z każdej z kart definicję naszego height

7:18czyli ustawimy je na auto to widzimy że elementy

7:23zostały rozciągnięte ponieważ mamy line content ustawione na stretch

7:27i wszystkie trzy linie flexboxa są rozciągnięte

7:32w ten sposób aby każda linia zajmowała maksymalną

7:36dostępną przestrzeń natomiast karta numer 2 jest wycentrowana zarówno

7:40w pionie jak i w poziomie oczywiście podobny efekt w kontekście samego

7:45pozycjonowania wzdłuż osi cross axis na

7:50poszczególnym elemencie przy użyciu align-self

7:55ustawionego na center jest

8:00to odpowiednik align-content dla poszczególnego

8:05elementu flexboxa natomiast jak widzisz marginesy

8:09z lewej i z prawej strony dalej musimy ręcznie zaaplikować więc

8:14możemy tutaj ustawić margin-left auto i

8:19w tym momencie karta jest dociągnięta do prawej strony ponieważ jest wypychana

8:23z lewej jest wycentrowana przy pomocy align-self

8:27ustawionego na center natomiast jeśli damy

8:31margin-right auto

8:35to karta będzie wycentrowana

8:40również w pionie natomiast możemy to osiągnąć również bez tego align-self

8:44w większości przypadków takie skomplikowane operacje na marginesach

8:49nie są konieczne ponieważ flex box jest dosyć elastycznym modelem

8:53tworzenia layout'ów jak sama nazwa wskazuje natomiast jeśli chodzi o optymalizację

8:58konkretnych małych break-point'ów bez ingerencji w cały

9:03layout ustawianie marginesu na konkretnych dzieciach flexboxa

9:07jest bardzo dobrą praktyką i jest dobrze wspierana więc polecam

9:11używać tej metody i polecam pamiętać o tym że margines

9:16ma bardzo duże znaczenie w kontekście pozycjonowania

9:20layout'ów we flexboxie wiedząc to wszystko masz już na prawdę solidną

9:24wiedzę o flexboxie i możesz śmiało tworzyć layouty w oparciu o ten system

9:28w kolejnym rozdziale problemy które flexbox tworzy

9:32jak je rozwiązywać bądź przynajmniej być świadomym efektów

9:37ubocznych korzystania z flexboxa a tymczasem to wszystko w tej lekcji cieszę

9:42się że udało ci się dotrwać do końca tego rozdziału i do usłyszenia w następnym