Використання модуля CSS «flexbox». На уроці

Тести Інформатика 11 клас Тест
Бражник С. Є.
Додано: 8 грудня 2025
Предмет: Інформатика, 11 клас
Копія з тесту: Практична робота №5. Використання модуля CSS «flexbox»
Домашня робота
В реальному часі
Тестування
Відповідності
Флеш-картки
Роздрукувати
10 запитань
Запитання 1

Яка головна мета створення модуля Flexbox (Flexible Box Layout Module)?

варіанти відповідей

Спростити роботу з анімацією та динамічними ефектами на вебсторінці.

Розробити двовимірну сітку (рядки та стовпці) для основного макета сторінки.

Зробити шари гнучкими та інтуїтивно зрозумілими для компонування елементів в одному вимірі.

Створювати вебсторінки з фіксованими розмірами для конкретних пристроїв.

Запитання 2

З яких двох основних компонентів складається модель Flexbox?

варіанти відповідей

Гнучкий контейнер (Flex container) і гнучкі елементи (Flex items).

Горизонтальна вісь і вертикальна вісь.

Батьківський блок і дочірній заголовок.

Адаптивний макет і медіа-запит.

Запитання 3

Яке значення CSS властивості display використовується для перетворення HTML-елемента на гнучкий контейнер?

варіанти відповідей

grid або inline-grid

block або inline-block

flex або inline-flex

table-cell

Запитання 4

Яка з перерахованих проблем є найпоширенішою, яку модуль Flexbox допомагає розв'язати завдяки своїм властивостям?

варіанти відповідей

Автоматичний переклад тексту на вебсторінці.

Створення окремих стилів для кожного брейкпоінта.

Проблема з горизонтальним і вертикальним центруванням елементів.

Надмірна швидкість завантаження сторінок.

Запитання 5

В якому з напрямків не дозволяє розташовувати елементи модуль Flexbox?

варіанти відповідей

Знизу вгору.

Справа наліво.

По діагоналі.

Зверху вниз.

Запитання 6

Як Flexbox забезпечує гнучкість розмірів елементів?

варіанти відповідей

Надаючи всім елементам автоматичний розмір 100px.

За допомогою медіа-запитів для кожного елемента.

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

Використовуючи лише пікселі (px) для фіксованих розмірів.

Запитання 7

Яку проблему, що було складно реалізувати за допомогою традиційних методів CSS, допомагає вирішити Flexbox, пов'язану з багатоколонковою версткою?

варіанти відповідей

Забезпечувати абсолютне позиціювання всіх елементів.

Забороняти переносити елементи всередині контейнера.

Створювати колонки однакової висоти, незалежно від вмісту кожної.

Автоматично приховувати вміст, який не поміщається на екрані.

Запитання 8

У чому полягає основна відмінність між display: flex; та display: inline-flex;?

варіанти відповідей

Flex створює Flex-контейнер рівня блоку, а inline-flex — Flex-контейнер рівня рядка.

Flex створює контейнер рівня рядка, а inline-flex — рівня блоку.

Flex підтримує лише 4 елементи, а inline-flex — необмежену кількість.

Flex керує горизонтальними елементами, а inline-flex — вертикальними.

Запитання 9

Яка властивість Flexbox дозволяє елементам переноситися на новий рядок або стовпець, коли вони не поміщаються в контейнері?

варіанти відповідей

flex-direction

justify-content

align-items

flex-wrap

Запитання 10

Що, відповідно до тексту, є наступним кроком у розвитку макетів після Flexbox, який дозволяє оперувати стовпцями та рядками (двовимірний простір)?

варіанти відповідей

CSS Transitions

Grid (Модуль сітки)

Multi-column layout (Багатоколонкова верстка)

Media Queries

Створюйте онлайн-тести
для контролю знань і залучення учнів
до активної роботи у класі та вдома

Створити тест