wayground logo

Free Printable Worksheets

Font size

S
M
L
XL
Worksheets

5. WB January RU

Total questions: 20

Worksheet time: 10mins

Name
Class
Date
1.

Как сделать элемент flex-контейнером?

a)

flex: 1;

b)

display: flex;

c)

flex-direction: row;

d)

align-item: flex;

2.

С какой осью работает свойство align-items?

a)

С главной

b)

С вспомогательной

3.

Какое значение НЕ может принимать justify-content?

a)

flex-end

b)

space-around

c)

center

d)

flex

4.

Как изменить направление главной оси?

a)

С помощью свойства flex-direction

b)

Изменить display: flex на display: flex-reverse;

c)

align-items: flex-start;

d)

justify-content: flex-start;

5.

Задает одинаковое расстояние между блоками, но не между контейнером и квадратами.

a)

space-around

b)

flex-end

c)

space-between

d)

center

6.

Для чего нужна свойство order?

a)

Устанавливает порядок следования элемента относительно других

b)

Размещает элемент по центру

c)

Размещает элемент в начале контейнера

d)

Позволяет выравнивать элементы отдельно вдоль вспомогательной оси

7.

Как растянуть элемент на всю высоту контейнера?

a)

align-self: baseline;

b)

align-self: stretch;

c)

align-self: center;

d)

justify-content: stretch;

8.

Какой стиль применен к элементу 1?

a)

align-self: baseline;

b)

align-self: stretch;

c)

align-self: center;

d)

justify-content: center;

9.

С какой осью работает justify-content?

a)

С главной

b)

С вспомогательной

10.

Какое значение свойства justify-content продемонстрировано на картинке?

a)

center

b)

space-around

c)

space-between

d)

flex-start

11.

Какое свойство можно заменить на flex-basis?

a)

высота

b)

flex-grow

c)

ширина

d)

flex-shrink

12.

Что будет, если для элемента указать свойство flex-shrink: 0?

a)

Он сожмется до 0px

b)

Ему будет запрещено сжиматься

c)

Этот элемент будет сжиматься как обычно

d)

Элемент взорвется

13.

Как правильно сократить следующие свойства: flex-basis: 100px; flex-grow: 1; flex-shrink: 2;

a)

flex: 100px 1 2;

b)

flex: 2 1 100px;

c)

flex: 1 2 100px;

d)

flex: 1 100px 2;

14.

Необходимо разместить элементы по центру относительно оси X и Y. Какой способ правильный?

a)

align-items: baseline; flex-direction: column;

b)

align-items: flex-start; justify-content: center;

c)

align-items: center; justify-content: center;

d)

align-self: center;

15.

Как работает свойство flex-grow?

a)

Указывает размеры элемента

b)

Указывает, сколько свободного места может занимать элемент относительно других элементов

c)

Указывает, на сколько элемент может сжиматься относительно других элементов

d)

Указывает, на сколько увеличить элемент

16.

Какой медиа-запрос сработает, когда ширина экрана будет меньше 800px?

a)

@media all and (min-width: 800px){}

b)

@media all and (width: 800px){}

c)

@media all and (max-width: 800px){}

d)

@media all and (min-height: 800px){}

17.

Если вам нужно будет добавить элементы в столбик. Какая свойство может помочь?

a)

justify-content: center;

b)

align-items: flex-start;

c)

flex-direction: column;

d)

flex-direction: row;

18.
При зменшенні вікна браузера потрібно, щоб елементи перескакували на новий ряд. Яку властивість потрібно застосувати?
a)
wrap
b)
flex-shrink
c)
flex-grow
d)
flex-basis
19.

Необходимо изменить порядок следования элементов (1,2,3,4,5 и нужно 2,1,3,4,5). Какое свойство решит задачу?

a)

order

b)

align-items

c)

position

d)

flex

20.

Как убрать кружки из неупорядоченного списка (ol)

a)

text-decoration: none;

b)

list-decoration: none;

c)

display: none;

d)

list-style: none;