У цьому посібнику ви дізнаєтеся, як створити прикладну структуру для ваших веб-проєктів з використанням Flexbox-макету в CSS та HTML. Ми розглянемо використання вбудованих інструментів відладки у зв'язку з Visual Studio Code та Microsoft Edge та візьмемо перші кроки у включенні макету Flexbox. Flexbox - це потужна система макету, яка допомагає вам створювати складні макети з меншими зусиллями та гнучким розташуванням елементів.
Ключові відомості
- За допомогою Flexbox ви можете розташовувати елементи горизонтально та вертикально.
- Інструменти розробника Microsoft Edge можна безпосередньо інтегрувати у Visual Studio Code.
- Flex-Direction впливає на спрямування елементів Flex.
Посібник по кроках
Спершу ви встановите інструменти Microsoft Edge в Visual Studio Code. Знайдіть «Інструменти Microsoft Edge для VS Code» у розширеннях та встановіть їх.
Після встановлення розширення перейдіть до параметрів налагодження. Клацніть на «Run and Debug», а потім на «створити файл launch.json». Це допоможе вам налаштувати ваші налаштування.
У налаштувальному файлі, який саме створено, додайте нове налаштування для «Інструментів Microsoft Edge». Переконайтеся, що ви вводите локальну адресу 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-атрибут контейнера Flex - display: flex;. Після виконання цього ви побачите, як розташування дітей автоматично змінюється, і тепер вони відображаються поруч одне з одним.
Якщо ви хочете знову вертикально розташувати дітей Flex, ви можете використати властивість flex-direction. Встановіть flex-direction: column; для контейнера Flex, щоб змінити розташування дітей Flex знову у вертикальному напрямку.
Ви помітите, що діти Flex тепер знову розміщуються вертикально. Якщо ви тепер налаштуєте висоту та ширину, це буде виглядати так, наче вони вбудовані у блок, навіть якщо display не встановлено на Block, а на Flex.
Це був короткий огляд основ Flexbox-макету. У відео ми обговорили основні властивості та їх наслідки. У майбутніх посібниках ми вивчимо інші функції Flexbox та побачимо, що все ви можетесь зробити з цією потужною системою макетів.
Підсумок
У цьому посібнику ви навчилися, як створити просту структуру з Flexbox в CSS. Ви інтегрували інструменти розробника Microsoft Edge в Visual Studio Code та відправили перші кроки до активації Flex-макету. Перед вами ще багато можливостей, які ми розглянемо у наступних відео.
Часті запитання
Як активувати Flexbox в CSS?Ви активуєте Flexbox, встановивши для контейнера display: flex;.
Чим є flex-direction?Flex-direction визначає спрямування дітей Flex, або горизонтально (row), або вертикально (column).
Як інтегрувати інструменти Microsoft Edge в Visual Studio Code?Просто знайдіть «Інструменти Microsoft Edge для VS Code» у панелі розширень та встановіть їх.