Figma Autolayout i Atomic Design: HTML/CSS Flexbox

0:02Tworzenie projektów z wykorzystaniem funkcji autolayout nie tylko przyśpieszy

0:06Twoją pracę, ale również ułatwi współpracę z developerami.

0:10Korzystają oni z funkcji flexbox, która

0:12jest opcją w HTML/CSS pozwalającą na efektywne układanie, wyrównywanie i

0:18dystrybucję elementów w ramach kontenera. Przestrzeni, w której się znajdują.

0:23Na ekranie widzimy kilka kontenerów przedstawionych za pomocą czarnej linii

0:29oraz pewne elementy wewnątrz tych kontenerów.

0:32Są one wypełnione czerwonym kolorem.

0:34Już same te poszczególne kafelki przypominają nam w jakiś sposób

0:40okno dialogowe panelu autolayout w Figm'ie, prawda?

0:45Przejdźmy przez te przykłady, żeby dobrze zrozumieć, jak działa flexbox.

0:49Funkcja flex-direction odpowiada za

0:52kierunek wyświetlania elementów wewnątrz kontenera.

0:55Jeżeli wybierzemy opcję row,

0:57nasze elementy w kontenerze zostaną ułożone w linii jeden obok drugiego.

1:03Jeżeli wybierzemy funkcję column, elementy będą wyświetlane jeden pod drugim.

1:07Za pomocą funkcji Flex-direction możemy

1:09również zmienić kolejność wyświetlania elementów.

1:11Służy do tego row reverse lub column reverse.

1:15Funkcja align-items pozwala na wyrównanie elementów względem siebie.

1:21Na jednym z przykładów widzimy elementy wyrównane do środka.

1:24Odpowiada za to opcja center.

1:27Kiedy wybierzemy opcję flex end, elementy zostaną wyrównane do dolnej krawędzi.

1:34Gdybyśmy wybrali opcję Flex start, zostaną one wyrównane do górnej krawędzi.

1:38Bardzo fajną i przydatną funkcją jest funkcja stretch.

1:42W tym momencie wszystkie elementy zostaną rozciągnięte w taki sposób, aby przyjęły

1:47one wysokość najwyższego elementu w danym kontenerze.

1:51Jest to wyrównanie względem siebie,

1:53ale co jeżeli chcemy wyrównać elementy wewnątrz kontenera?

1:56Do tego służy funkcja align-content.

1:59Align-content odpowiada za ułożenie elementów w pionie jeden pod drugim.

2:04Jeżeli wybierzemy opcję flex start, elementy będą układane od góry do dołu.

2:10Jeżeli wybierzemy opcję flex end, będą one układane od dołu kontenera do góry.

2:16Zauważcie, że używamy podobnych funkcji flex and, flex start.

2:20Natomiast w przypadku align-items flex end

2:23tyczy się linii elementów, które wyrównujemy.

2:26W przypadku align-content tyczy się to początku kontenera.

2:30Jeżeli chcemy, aby elementy były rozłożone

2:33w równej odległości między sobą, możemy skorzystać z funkcji space between.

2:38Możemy również elementy rozciągnąć.

2:40Podobnie jak w przypadku align-items.

2:42Korzystamy z funkcji stretch.

2:44Za rozłożenie elementów w poziomie odpowiada funkcja justify-content.

2:50I podobnie możemy skorzystać z opcji flex start i flex end.

2:54Flex start będzie informacją, że elementy powinny być układane od lewej

3:00krawędzi do prawej, a w przypadku flex end od prawej do lewej.

3:05Możemy również skorzystać z funkcji space between.

3:08I tutaj również elementy zostaną rozłożone równolegle między sobą.

3:12Dodatkowo, jeżeli mają wypełnić cały

3:15kontener, odległość między krawędziami kontenera a elementami będzie taka sama.

3:20Bardzo podobną funkcją, z drobną różnicą jest space around.

3:24Polega ona na tym, że

3:26każdy element ma swój margines i o ten margines elementy są od siebie odsunięte.

3:34To znaczy, że między poszczególnymi

3:36elementami interfejsu odległość może być dwukrotnie większa niż

3:41odległość między elementem a krawędzią kontenera.

3:45Chciałbym Ci teraz pokazać przykładowy

3:47moduł strony internetowej wykonany w całości za pomocą funkcji autolayout.

3:54Kiedy uruchomimy tryb dev mode w Figm'ie

3:57możemy dokładnie prześledzić jak będzie wyglądała klasa CSS opisująca ten moduł.

4:03Popatrzmy w prawe okno layout.

4:06Już na samym początku widzimy, że dany

4:08moduł powinien być wyświetlany za pomocą funkcji flexbox.

4:11Następnie poniżej widzimy parametr flex direction ustawiony na opcję column.

4:16To znaczy, że wszystkie elementy powinny być wyświetlone jeden pod drugim.

4:19Możemy jeszcze zobaczyć, że jest funkcja align self stretch.

4:24Znaczy to, że wszystkie elementy powinny wypełniać kontener, rozciągać się w miarę

4:30tego, jak ten kontener będzie zmieniał swój rozmiar.

4:34Jak widzicie, funkcja autolayout działa dokładnie jak funkcja flexbox w CSS.

4:39Nawet sam wygląd panelu,

4:43gdzie ustawiamy parametry autolayout przypomina wizualną interpretację tego,

4:48jak zachowują się moduły zakodowane za pomocą klasy flexbox.