Flexbox в CSS: Перші кроки у структуруванні вашого веб-сайту

У цьому посібнику ви дізнаєтеся, як створити прикладну структуру для ваших веб-проєктів з використанням 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-макету. Перед вами ще багато можливостей, які ми розглянемо у наступних відео.