Опубліковано

CSS. FlexBox

Інформатика 12 запитань
Додано
22 листопада 2020
Предмет
Інформатика
Тест виконано
661 раз

Робота з учнями результати зберігаються

Домашня роботаУчні проходять тест за кодом до визначеного терміну. Результати збираються автоматично.В реальному часіГра на уроці: учні приєднуються з телефонів, а ви бачите живий рейтинг на екрані.Командна граДоступно автору тесту та сертифікованим учителям — тут видно відповіді.

Режими пройти самостійно — результати не зберігаються

Тестування 12 запитань Флеш-картки автору й сертифікованим Відповідності автору й сертифікованим Вгадай слово 3 слова Анаграма автору й сертифікованим Телевікторина 12 запитань Лови правильну 12 запитань Кросворд 3 слова Пошук слів автору й сертифікованим Знайди пару автору й сертифікованим Знайди відповідь автору й сертифікованим Літачок 4 запитання Лабіринт 4 запитання
Роздрукувати: Тест Кросворд Пошук слів Знайди пару Картки

12 запитань

1 Запитання 1 Кілька правильних відповідей

Що таке flexbox ?

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

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

  • Це таблична верстка

  • Це плаваючи блоки

  • Це гнучкі блоки

2 Запитання 2 Одна правильна відповідь

Що таке Flex-контейнер?

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

  • Батьківський елемент, у якому містяться flex-айтеми.

  • Те саме що і flex-айтеми

  • Дочірній елемент, у якому містяться flex-айтеми.

  • Таких елементів не існує

3 Запитання 3 Одна правильна відповідь

Як зробити елемент флекс-контейнером?

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

  • display: flex;

  • display: block;

  • display: flex-block;

  • flex: block;

4 Запитання 4 Одна правильна відповідь

justify-content: space-between;

варіанти відповідей
5 Запитання 5 Одна правильна відповідь

justify-content: space-around;

варіанти відповідей
6 Запитання 6 Одна правильна відповідь

justify-content: center;

варіанти відповідей
7 Запитання 7 Одна правильна відповідь

justify-content: right;

варіанти відповідей
8 Запитання 8 Одна правильна відповідь

Який код перенесе гнучкі елементи на новий рядок, якщо не вистачить місця

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

  • flex: wrap;

  • flex-wrap:no-wrap;

  • flex-wrap: wrap-reverce;

  • flex-wrap: wrap;

9 Запитання 9 Одна правильна відповідь

Як розкласти блоки так як на малюнку?

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

  • flex-direction: row-reverse;

  • flex-direction: row;

  • flex-direction: column;

  • flex-direction: column-reverse;

10 Запитання 10 Одна правильна відповідь

Дозволяє вирівнювати елементи кожен окремо.

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

  • align-self:

  • align-content:

  • order:

  • flex-basis:

  • flex-grow:

  • flex-shrink:

  • align-items:

  • justify-content:

11 Запитання 11 Одна правильна відповідь

Керує вирівнюванням рядів вдовж поперечної осі.

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

  • align-self:

  • align-content:

  • order:

  • flex-basis:

  • flex-grow:

  • flex-shrink:

  • align-items:

  • justify-content:

12 Запитання 12 Одна правильна відповідь

Дозволяє змінювати порядок слідування елементів в потоці, не змінюючи HTML-код.

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

  • align-self:

  • align-content:

  • order:

  • flex-basis:

  • flex-grow:

  • flex-shrink:

  • align-items:

  • justify-content:

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

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

Схожі тести

Рекомендовані тести