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

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

1. Вступ до Flexbox (5 хвилин)

• Що таке Flexbox?

  • Flexbox — це сучасна модель компонування, яка дозволяє вирівнювати та розподіляти простір між елементами в одному вимірі: горизонтально або вертикально.
  • Вона дає можливість створювати адаптивні дизайни, де елементи можуть легко змінювати свої розміри та положення залежно від розміру контейнера.
    
    

• Flex-контейнер і flex-елементи:

  • Щоб використовувати Flexbox, треба оголосити елемент як flex-контейнер за допомогою властивості display: flex;. Усі дочірні елементи автоматично стають flex-елементами.

2. Створення flex-контейнера (10 хвилин)

• Як зробити контейнер flex-контейнером:

  • Використовуємо display: flex; для елемента-контейнера.
    
    

• Приклад:

  .container {
    display: flex;
  }
  

Вирівнювання елементів уздовж головної осі:

• Flexbox використовує головну вісь (main axis) і перпендикулярну вісь (cross axis). За замовчуванням, головна вісь — це горизонтальна лінія (зліва направо), але можна змінити напрямок.

• Властивість flex-direction визначає, як розміщуються flex-елементи: горизонтально чи вертикально.

  • row (за замовчуванням): елементи вирівнюються по горизонталі.
  • column: елементи вирівнюються по вертикалі.

Приклад:

.container {
  display: flex;
  flex-direction: row; /* або column */
}

Розподіл простору між елементами:

• Властивість justify-content допомагає керувати вирівнюванням елементів по головній осі.

Основні значення:

• flex-start: елементи вирівнюються на початку контейнера.
• center: елементи вирівнюються по центру.
• space-between: простір рівномірно розподіляється між елементами.

Приклад:

.container {
  display: flex;
  justify-content: space-between;
}

• Пояснення: Це дозволяє рівномірно розподілити елементи вздовж головної осі з простором між ними.

3. Вирівнювання по перпендикулярній осі (5 хвилин)

• Вирівнювання елементів по перпендикулярній осі:

  • Властивість align-items використовується для вирівнювання flex-елементів по перпендикулярній осі (вертикалі, якщо flex-direction: row;).
    
    

• Основні значення:

  • flex-start: елементи вирівнюються на початку по перпендикулярній осі.
  • center: елементи вирівнюються по центру по вертикалі.
  • stretch: елементи розтягуються по висоті контейнера (за замовчуванням).
    
    

• Приклад:

  .container {
    display: flex;
    align-items: center;
  }
  

• Пояснення: Це вирівнює елементи по центру контейнера вертикально.

4. Розподіл елементів у кілька рядків (5 хвилин)

• Керування перенесенням елементів на новий рядок:

  • Властивість flex-wrap дозволяє елементам переноситися на новий рядок, якщо вони не вміщуються в одному ряді.
    
    

• Основні значення:

  • nowrap (за замовчуванням): усі елементи залишаються в одному ряді.
  • wrap: елементи переносяться на новий рядок, якщо не вміщуються.
    
    

• Приклад:

  .container {
    display: flex;
    flex-wrap: wrap;
  }
  

• Пояснення: Елементи будуть переноситися на нові рядки, якщо бракуватиме місця.

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

• Завдання 1:

  • Створіть flex-контейнер, у якому вирівняйте три елементи по центру по горизонталі і вертикалі.
    
    

• Приклад:

  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  

Завдання 2:

• Створіть flex-контейнер з трьома елементами, розташованими з простором між ними (використайте space-between).
  
  

Приклад:

.container {
  display: flex;
  justify-content: space-between;
}

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

• Що повторити:

  • Як працює Flexbox і основні властивості для вирівнювання елементів.
  • Що таке justify-content, align-items, flex-direction, та як вони допомагають керувати розташуванням елементів.
    
    

• Запитання для обговорення:

  • Як працює flex-wrap і для чого його використовують?
  • У чому різниця між justify-content: center; і align-items: center;?

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

• Створіть сторінку з трьома блоками, використовуючи Flexbox. Вирівняйте блоки горизонтально по центру, додайте простір між ними, і налаштуйте поведінку при зміні розміру вікна.
  
  

Ось приклад коду для домашнього завдання, яке створює сторінку з трьома блоками, використовуючи Flexbox. Блоки вирівняні горизонтально по центру, з простором між ними, і адаптуються до зміни розміру вікна:

HTML (index.html)

CSS (styles.css)

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

1. HTML:

   • Створено контейнер з класом container, в якому знаходяться три блоки з класом block.
   • Кожен блок містить текст, щоб позначити, що це за блок.
     
     

2. CSS:

   • display: flex; на контейнері дозволяє використовувати Flexbox для розташування блоків.
   • justify-content: space-between; забезпечує рівний простір між блоками.
   • align-items: center; вирівнює блоки по вертикалі в центрі контейнера.
   • flex: 1; на блоках дозволяє їм займати рівний простір у контейнері.
   • В медіа-запиті (@media) зменшуються відступи для блоків на менших екранах, щоб покращити вигляд.

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

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

Тепер ви повинні побачити три блоки, вирівняні по центру, з простором між ними, і вони повинні адаптуватися до розміру вікна!

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