В този учебник ще научиш как да изградиш примерна структура за своите уебпроекти с Flexbox Layout в CSS и HTML. Ще разгледаме вградените инструменти за отстраняване на грешки от Visual Studio Code, свързани с Microsoft Edge, и ще предприемем първите стъпки за активиране на Flexbox Layout. Flexbox е мощна система за оформление, която помага да създадете сложни оформления с минимални усилия и гъвкаво разпределение на елементите.
Най-важнои:
- С Flexbox можеш да подреждаш елементи хоризонтално и вертикално.
- Инструментите за отстраняване на грешки на Microsoft Edge могат директно да бъдат интегрирани във Visual Studio Code.
- Flex-Direction влияе на насочването на Flex елементите.
Стъпка по стъпка насоки
Първо ще инсталираш инструментите на Microsoft Edge във Visual Studio Code. Търси "Microsoft Edge Tools for VS Code" в разширенията и ги инсталирай.
След като инсталацията приключи, трябва да отидеш в опциите за отстраняване на грешки. Кликни върху "Run and Debug" и след това върху "create a launch.json file". Това ще ти помогне да конфигурираш настройките си.
В конфигурационния файл, който вече е създаден, добави нова конфигурация за "Microsoft Edge Tools". Увери се, че вписваш локалния адрес като localhost:3000, тъй като ще пуснем сървъра в този порт през терминала.
Сега е време да стартираш проекта си. Промени папката към правилната и изпълни командата npm run dev. След това отвори localhost:3000 в браузъра си.
След като заредиш страницата, можеш да активираш инструментите за отстраняване на грешки от Microsoft Edge, като кликнеш върху съответния бутон във Visual Studio Code. Това ще отвори Developer Tool директно до редактора ти.
Сега можеш да видиш структурата на приложението си. Имаме контейнер (div), който носи класа "Flex Container". В този контейнер има четири DIV елемента, които носят класа "Flex Child" и представляват съответно текстовите съдържания 1, 2, 3 и 4.
В момента Flex Container-ът е дефиниран само с ширина от 400 пиксела и височина от 200 пиксела, докато Flex Child-овете са дефинирани със ширина от 100 пиксела и височина от 50 пиксела. Въпреки че в момента нито един от децата не е подреден с Flexbox, те се показват във вертикален списък.
За да използвате активно Flexbox, трябва да добавите CSS атрибута display: flex; на Flex Container-а и да го запазите. При това обновяване ще видиш, че подредбата на децата се променя автоматично и вече са подредени ред към ред.
Ако искаш отново да подредиш Flex Child-овете вертикално, можеш да използваш свойството flex-direction. Задай flex-direction: column; за Flex Container-а, за да промениш отново насочването на Flex децата към вертикалната посока.
Ще забележиш, че Flex Child-овете отново са подредени вертикално. Сега, когато промениш височината и ширината, те изглеждат като вградени в един блок, въпреки че display не е сетнат на Block, а на Flex.
Това беше кратък преглед на основите на Flexbox Layout-а. Във видеото разгледахме основните характеристики и видяхме тяхното влияние. В бъдещи уроци ще проучим още функционалности на Flexbox и ще видим какво всичко можеш да направиш с тази мощна система за оформление.
Резюме
В този урок научи как да създадеш прости структури с Flexbox в CSS. Интегрира във Visual Studio Code инструментите за отстраняване на грешки на Microsoft Edge и предприе първите стъпки за активиране на Flex Layout-а. Пред теб стоят още много възможности, които ще проучим в следващите видеа.
Често задавани въпроси
Как да активирам Flexbox в CSS?Активираш Flexbox като зададеш на контейнера display: flex;.
Какво е flex-direction?flex-direction определя насочването на Flex децата, било то хоризонтално (row) или вертикално (column).
Как да интегрирам Microsoft Edge Tools в Visual Studio Code?Просто потърси "Microsoft Edge Tools for VS Code" в лентата с разширенията и ги инсталирай.
