NEW
Font size
WorksheetsFLEXBOX
Total questions: 15
Worksheet time: 8mins
Для чего служит модель 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-контейнера
Так нельзя делать
