В этом руководстве ты узнаешь, как создать структуру примера для своих веб-проектов с помощью Flexbox-макета в CSS и HTML. Мы изучим интегрированные инструменты отладки из Visual Studio Code в связке с Microsoft Edge и предпримем первые шаги по активации макета Flexbox. Flexbox - это мощная система макета, которая поможет тебе создавать сложные макеты с небольшими усилиями и гибким размещением элементов.
Основные выводы
- С помощью Flexbox вы можете выстраивать элементы горизонтально и вертикально.
- Инструменты разработчика Microsoft Edge могут интегрироваться прямо в Visual Studio Code.
- Flex-Direction влияет на выравнивание элементов Flex.
Пошаговая инструкция
В Visual Studio Code сначала ты установишь инструменты Microsoft Edge. Ищи "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. Это откроет инструмент непосредственно рядом с вашим редактором.
Теперь ты можешь увидеть структуру своего приложения. У нас есть контейнер (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 Child обратно в вертикальное.
Ты увидишь, что теперь Flex Child снова выстроены вертикально. Если сейчас изменить высоту и ширину, будет казаться, что они встроены в блок, даже если display не установлен на Block, а на Flex.
Это был краткий обзор основ Flexbox. В видео мы обсудили главные свойства и увидели их влияние. В следующих руководствах мы исследуем дополнительные функции Flexbox и увидим, что можно сделать с этой мощной системой макетов.
Итог
В этом учебнике ты научился создавать простую структуру с помощью Flexbox в CSS. Ты интегрировал инструменты разработчика Microsoft Edge в Visual Studio Code и предпринял первые шаги по активации макета Flex. Перед тобой открывается много возможностей, которые мы рассмотрим в следующих видео.
Часто задаваемые вопросы
Как активировать Flexbox в CSS?Ты активируешь Flexbox, добавив display: flex; для контейнера.
Что такое flex-direction?flex-direction определяет выравнивание Flex Child, лиро горизонтально (row), либо вертикально (column).
Как интегрировать инструменты Microsoft Edge в Visual Studio Code?Просто найди "Microsoft Edge Tools for VS Code" в панели расширений и установи их.
