Календар

Опитування

Оцініть роботу двигуна

Четвер

жов 31

Урок 7. Flexbox (частина 2): Побудова макетів з Flexbox

Name: Урок 7. Flexbox (частина 2): Побудова макетів з Flexbox
Author: admin

admin

Адміністратор

Уроки CSS 36 0

План уроку: Flexbox (частина 2) (25-30 хвилин)

1. Вступ до побудови макетів (5 хвилин)

Що таке макет?
- Макет — це структура та оформлення елементів на веб-сторінці, що визначає, як інформація буде представлена.
- Flexbox надає можливість легко створювати різноманітні макети, від простих до складних.
Чому Flexbox?
- Flexbox дозволяє швидко та ефективно розташовувати елементи в один ряд чи стовпець, а також адаптувати їх до різних розмірів екрану.

2. Створення базового макету (10 хвилин)

Приклад: Створення заголовка, бокової панелі та основного контенту:
- Створимо макет, де буде заголовок, бокова панель та основний контент.

HTML (index.html):

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Макет</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="header">Заголовок сайту</header>
    <div class="container">
        <aside class="sidebar">Бокова панель</aside>
        <main class="main-content">Основний контент</main>
    </div>
    <footer class="footer">Футер</footer>
</body>
</html>

CSS (styles.css):

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.header, .footer {
    background-color: #4CAF50;
    color: white;
    text-align: center;
    padding: 15px;
}

.container {
    display: flex;
}

.sidebar {
    background-color: #f4f4f4;
    padding: 15px;
    width: 200px; /* Ширина бокової панелі */
}

.main-content {
    flex: 1; /* Основний контент займає залишковий простір */
    background-color: #ffffff;
    padding: 15px;
}

Пояснення коду:
- HTML: Створено структуру сторінки з заголовком, боковою панеллю, основним контентом і футером.
- CSS:
  - display: flex; у класі .container дозволяє розташовувати бокову панель і основний контент у ряд.
  - Властивість flex: 1; у класі .main-content дозволяє основному контенту займати весь доступний простір.

3. Додаткові властивості Flexbox (5 хвилин)

Вирівнювання елементів у рядку:
- Властивість align-items може використовуватися для вертикального вирівнювання елементів у контейнері.

Приклад:

.container {
    display: flex;
    align-items: stretch; /* Розтягує елементи до максимальної висоти */
}

Зміна порядку елементів:

Властивість order дозволяє змінювати порядок елементів у контейнері.

Приклад:

.sidebar {
    order: 1; /* Змінює порядок бокової панелі */
}
.main-content {
    order: 2; /* Змінює порядок основного контенту */
}

4. Побудова адаптивного макету (5 хвилин)

Приклад: Адаптивний макет для мобільних пристроїв:
- Додайте медіа-запити для зміни макету на маленьких екранах.

CSS (додайте до styles.css):

@media (max-width: 600px) {
    .container {
        flex-direction: column; /* Вирівнювання елементів вертикально */
    }

    .sidebar {
        width: 100%; /* Ширина бокової панелі на мобільному */
    }
}

Пояснення:
- На екранах шириною менше 600 пікселів, елементи контейнера будуть розташовані вертикально.

5. Практична частина (10 хвилин)

Завдання 1:
- Створіть макет із заголовком, футером, основним контентом та двома боковими панелями.
- Використовуйте Flexbox для їхнього розташування.

HTML:

<div class="container">
    <aside class="sidebar">Бокова панель 1</aside>
    <main class="main-content">Основний контент</main>
    <aside class="sidebar">Бокова панель 2</aside>
</div>

CSS:

.container {
    display: flex;
}

.sidebar {
    width: 200px; /* Ширина бокових панелей */
}

.main-content {
    flex: 1; /* Основний контент займає залишковий простір */
}

Завдання 2:
- Додайте медіа-запит для зміни макету на мобільних пристроях.

6. Підсумок уроку (5 хвилин)

Що повторити:
- Як використовувати Flexbox для створення макетів.
- Основні властивості Flexbox: flex-direction, justify-content, align-items, flex-wrap, order.
Запитання для обговорення:
- Які переваги використання Flexbox у порівнянні з традиційними методами (наприклад, float)?
- Як можна використовувати Flexbox для створення адаптивного дизайну?

Домашнє завдання

Створіть адаптивний макет, який містить заголовок, основний контент, футер і дві бокові панелі. Використовуйте Flexbox для розташування елементів, і налаштуйте медіа-запити для зміни макету на мобільних пристроях.

Ось приклад адаптивного макету, що містить заголовок, основний контент, футер і дві бокові панелі. Для розташування елементів використовується Flexbox, а також налаштовані медіа-запити для зміни макету на мобільних пристроях.

HTML (index.html)

Показати / Приховати текст

CSS (styles.css)

Показати / Приховати текст

Пояснення коду

HTML:
- Структура містить заголовок, два бічні бокси (бокові панелі) і основний контент.
CSS:
- Основні стилі:
  - Заголовок та футер мають зелений фон і білий текст, а бокові панелі — сірий фон.
  - Використання display: flex; у класі .container дозволяє розташувати бокові панелі і основний контент в один ряд.
- Адаптивність:
  - При ширині вікна менше 800 пікселів, елементи контейнера переходять на вертикальне розташування завдяки flex-direction: column;.
  - Бокові панелі займають 100% ширини контейнера, що дозволяє їм адаптуватися до маленьких екранів.

Як перевірити

Створіть два файли: index.html та styles.css.
Скопіюйте відповідний код у кожен з файлів.
Відкрийте index.html у браузері.

Тепер ви повинні побачити адаптивний макет, де елементи розташовані горизонтально на широких екранах і вертикально на вузьких!

Цей урок дозволить учням поглибити свої знання про Flexbox і використовувати його для створення реальних макетів веб-сторінок, що сприятиме розумінню адаптивного дизайну.

<< Урок 6. Flexbox (частина 1): Основи flexbox, вирівнювання елементів по осі

Урок 8. Позиціювання: Static, Relative, Absolute, Fixed, Sticky >>

Дивіться також:

« Квітень 2025 »
Пн	Вт	Ср	Чт	Пт	Сб	Нд
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Календар

Хмарина тегів