WorksheetsCSS (flexbox)
Total questions: 31
Worksheet time: 18mins
Зачем нужен CSS?
Он создает правила, которые определяют внешний вид сайта
Он нужен чтоб сайт работал
Сколько существует способов добавления стили на сайт?
1
2
3
4
В какой тег добавляются внутренние стили в html-документе ?
В <body>
В тег <style> в <header>
<footer>
В тег <style> в <head>
Как подключить внешние стили (например style.css) к html-документу
<link rel="stylesheet" type="text/css" href="style.css">
<img rel="stylesheet" type="text/css" src="style.css">
<link rel="stylesheet" type="text/css">
<css rel="stylesheet" type="text/css" href="style.css">
Для чего служит модель 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
Вы прописали свойство flex-direction. Далее вам потребовалось, чтобы элементы следовали в обратном порядке, снизу вверх. Какое значение решит задачу?
column
row-reverse
column-reverse
При уменьшении окна браузера нужно чтобы элементы перескакивали на новый ряд. Какое свойство нужно применить?
wrap
nowrap
wrap-reverse
Вы используете свойство justify-content и нужно, чтобы крайние элементы прижимались к краям и место между элементами распределилось равномерно. Каким свойство воспользуетесь?
space-evenly
space-around
space-between
Если вам нужно выстроить элементы по центру относительно оси Y. Что из предложенного решит задачу?
align-items: flex-start
align-items: center
align-items: baseline
Нужно выстроить элементы по центру относительно оси X и Y. Какой способ правильный
align-items: baseline; flex-direction: column
align-items: flex-start; justify-content: center
align-items: center; justify-content: center
Что делает "flex-direction" - ?
Выравнивает текст в колонку или строчку
Выравнивает текст посередине
Выравнивает текст по верху
Что будет, если я напишу "justify-content: end" ?
Элемент переместиться вправо
Элемент исчезнет
Элемент переместиться влево
Элемент встанет в центр
Что делает свойство "flex-wrap" ?
Переносит элементы на следующие строчки
Не переносит элементы никуда
Выравнивает текст
flex-flow - это объединение каких 2-х свойств?
flex-direction,
flex-wrap
justify-content,
align-items
align-self,
order
Что такое Flexible Box Layout Module?
Движение под музыку или хвастовство
Модуль гибких блоков
Блок CSS
Блок HTML
Назовите основные понятия в fleхbox, которые лежат в основе компоновки элементов
Одним из основных понятий в fleхbox являются оси.
Основное понятие fleхbox это CSS
HTML и CSS
Использование свойства float
С помощью какого свойства можно задавать направление главной оси flex-контейнера?
display-flex
flex-flow
flex-direction
justify-content
Какие значания flex-direction размещают элементы в противоположном направлении? (возможно несколько вариантов)
column-reverse
row-reverse
top-reverse
bottom-reverse
center-reverse
Эта технология позволяет быстро и легко располагать тот или иной блок на веб-странице. Элементы выстраиваются по заданной оси и автоматически распределяются согласно настройкам.
CSS
HTML
display
Flexbox
float
Какие две оси есть у flexbox-контейнера?
Промежуточная + мнимая
Главная + поперечная
Богоподобная + мемная
Поперечная + продольная
Что делает свойство justify-content ?
Задаёт выравнивание элементов вдоль главной оси
Задаёт перенос элементов
Ничего не делает
Задаёт выравнивание элементов вдоль поперечной оси
Отметьте значения для свойства flex-wrap
nowrap
wrap
wrap-reverse
gap
space-around
Что произойдет с елементами, если их родителю прописать свойство display: flex
Они выстроятся вдоль оси Y
Ничего не произойдет
Выстроятся в ряд вдоль главной оси
Данный эффект достигнут за счёт свойств
align-items: flex-end;
justify-content: space-between;
align-items: space-between;
justify-content: flex-end;
align-items: flex-end;
justify-content: space-around;
align-items: space-around;
justify-content: flex-end;
Какое свойство позволяет менять местами блоки?
flex-grow
order
space-between
align-self
Имеется 4 блока . Блок 3 имеет значение order:1, остальные по умолчанию. Где окажется блок 3?
На первой позиции
На второй позиции
На третьей позиции
На четвёртой позиции
