Онлайн тест по Flexbox. Бесплатно и без регистрации

Для чего служит модель CSS flexbox

Способ компоновки элементов

Используется для добавления комментариев

Используюется для кроссбраузерной верстки

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

position: sticky

display: flex

flex-wrap: wrap

Является ли flex-контейнер блочным контейнером

Да

Нет

Не имеет значения

Что произойдет с елементами, если их родителю прописать свойство display: flex

Они выстроятся вдоль оси Y

Ничего не произойдет

Выстроятся в ряд вдоль главной оси

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

justify-content: center

align-items: flex-start

flex-direction: column

Какое значение отсутсвует у свойства justify-content ?

space-between

column-reverse

inherit

Какое значение по умолчанию у свойства align-items ?

stretch

initial

center

Вы прописали свойоство flex-direction. Далее вам потребовалось, чтобы элементы следовали в обратном порядке, снизу вверх. Какое значение решить задачу?

column

row-reverse

column-reverse

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

wrap

nowrap

wrap-reverse

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

order

align-items: center

position

Вы используете свойствоjustify-content и нужно, чтобы крайние элементы прижимались к краям и место между элементами распределилось равномерно. Каким свойство воспользуетесь?

space-evenly

space-around

space-between

Если вам нужно выстроить элементы по центру относительно оси Y. Что из предложенного решит задачу?

align-items: flex-start

align-items: center

align-items: baseline

Чем отличается flex-basis от width? Нужно выбрать паравильный ответ, если они есть

flex-basis работает только для оси X,Y. Это значит что при flex-direction:row или column flex-basis не контролирует ширину (width), а при flex-direction:column не контролирует высоту и ширину (height, width).

Отличий нет

Абсолютные элементы контейнера не участвуют во flex конструкции... А значит, flex-basis не влияет на элементы flex контейнера, если они абсолютны position:absolute. Им нужно будет указать width / height.

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

align-items: baseline; flex-direction: column

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

align-items: center; justify-content: center

Если flex елементу прописать margin-right: auto. Что произойдет?

Ничего

Элемент прижмется к правому краю flex-контейнера

Так нельзя делать

Тест по CSS Flexbox

Авторизация

Восстановление пароля