W tym samouczku dowiedzisz się, jak za pomocą układu Flexbox w CSS i HTML możesz stworzyć strukturę przykładową dla swoich projektów internetowych. Skoncentrujemy się na zintegrowanych narzędziach do debugowania z Visual Studio Code w połączeniu z Microsoft Edge oraz podejmiemy pierwsze kroki w celu aktywacji układu Flexbox. Flexbox to potężny system układów, który pomaga w łatwym tworzeniu skomplikowanych układów i elastycznym rozmieszczaniu elementów.
Najważniejsze spostrzeżenia
- Z Flexboxem możesz rozmieszczać elementy poziomo i pionowo.
- Narzędzia deweloperskie Microsoft Edge mogą być bezpośrednio zintegrowane z Visual Studio Code.
- Flex-Direction wpływa na rozmieszczenie elementów Flex.
Instrukcja krok po kroku
Najpierw zainstalujesz narzędzia Microsoft Edge w Visual Studio Code. Wyszukaj „Microsoft Edge Tools for VS Code” w rozszerzeniach i zainstaluj je.
Po zainstalowaniu rozszerzenia przejdź do opcji debugowania. Kliknij przycisk „Run and Debug“, a następnie „create a launch.json file“. Pomocne będzie to w skonfigurowaniu ustawień.
W nowo utworzonym pliku konfiguracyjnym dodaj nową konfigurację dla „Microsoft Edge Tools“. Upewnij się, że jako lokalny adres wpisujesz localhost:3000, ponieważ serwer jest uruchomiony na tym porcie w terminalu.
Nadszedł czas, aby uruchomić swój projekt. Przejdź do odpowiedniego podkatalogu i wykonaj polecenie npm run dev. Następnie otwórz localhost:3000 w swojej przeglądarce.
Po załadowaniu strony możesz aktywować narzędzia deweloperskie Microsoft Edge, klikając odpowiedni przycisk w Visual Studio Code. Rozszerzenie Developer Tool pojawi się bezpośrednio obok Twojego edytora.
Teraz możesz zobaczyć strukturę swojej aplikacji. Mamy kontener (div) noszący klasę „Flex Container“. Wewnątrz tego kontenera znajdują się cztery elementy DIV, które mają klasę „Flex Child“ i reprezentują tekst 1, 2, 3 i 4.
Obecnie kontener Flex jest zdefiniowany tylko z szerokością 400 pikseli i wysokością 200 pikseli, podczas gdy elementy Flex-Child są zdefiniowane z szerokością 100 pikseli i wysokością 50 pikseli. Chociaż żaden z dzieci nie jest obecnie rozmieszczony za pomocą Flexbox, zostaną one wyświetlone w pionowej liście.
Aby skorzystać z Flexbox, musisz dodać atrybut CSS display: flex; do kontenera Flex i zapisać zmiany. Po wykonaniu tego zobaczysz, że rozmieszczenie dzieci zmienia się automatycznie, a teraz są one wyświetlane obok siebie.
Jeśli chcesz ponownie pionowo rozmieścić dzieci Flex, użyj właściwości flex-direction. Ustaw flex-direction: column; dla kontenera Flex, aby zmienić rozmieszczenie dzieci Flex z powrotem na pionowe.
Zauważysz, że dzieci Flex są teraz ponownie rozmieszczone pionowo. Jeśli dostosujesz teraz wysokość i szerokość, będą wyglądać tak, jakby były zintegrowane w bloku, chociaż display nie jest ustawiony na Block, a na Flex.
To już przegląd podstaw układu Flexbox. W filmie omówiliśmy najważniejsze właściwości i ich wpływ. W przyszłych samouczkach będziemy badać dodatkowe funkcje Flexbox i zobaczymy, co można osiągnąć za pomocą tego potężnego systemu układów.
Podsumowanie
W tym samouczku nauczyłeś się, jak tworzyć prostą strukturę za pomocą Flexbox w CSS. Zintegrowałeś narzędzia deweloperskie Microsoft Edge z Visual Studio Code oraz podjąłeś pierwsze kroki w celu aktywacji układu Flex. Przed Tobą wiele możliwości, które będziemy szczegółowo omawiać w kolejnych filmach.
Najczęstsze pytania
Jak aktywować Flexbox w CSS?Aktywuj Flexbox, ustawiając dla kontenera display: flex;.
Czym jest flex-direction?flex-direction określa rozmieszczenie elementów Flex, czy poziome (row) czy pionowe (column).
Jak zintegrować narzędzia Microsoft Edge w Visual Studio Code?Wystarczy wyszukać „Microsoft Edge Tools for VS Code“ w pasku rozszerzeń i zainstalować je.
