Вопросы теста по Flex Box

1.Какую задачу рашает технология flex-box?
2.Какие осы вы знаете?
3.Какое направление по умолчанию имеет главная ось?
4.Какое направление по умолчанию имеет поперечная ось?
5.По умолчанию какие размеры имеет flex элемент?
6.Что такое flex контейнер?
7.Что делает свойство flex-direction?
8.Какие значения у свойства flex-direction вы знаете?
9.Значение space-evendly?
10.Чем занимается свойство justify-content?
11.Что делает свойство order?
12.Какое значение по умолчанию имеет свойство order?
13.Что нужно написать чтобы поменять местами 1 и 5 элемент?
14.Что происходит если элементы не помещаются по ширене?
15.Какие значения свойства flex-wrap вы знаете?
16.Чем занимается свойство arigin-items?
17.Какое значение по умолчанию у свойства arigine-items?
18.В чем различие origin-items и origin-content?
19.Какое свойство и значение обязательно для работы flex-box?
20.Как переместить на следующий ряд определенный flex-item не изменяя размера flex-box?
21.Что делает свойство flex-flow?
22.Что делает свойство flex-grow?
23.Что делает свойство arigin-self?
24.Как называются точки начала осей и конца осей?
25.Что делает свойство flex-basis?​

1.Какую задачу решает технология flex-box?

Вот представим, что мы сделали сайт, однако этот сайт на каком-то другом устройстве будет смотреться не так как надо. Нам придется или делать макет для каждого устройства, или использовать flex box

2.Какие осы вы знаете?

Главную и поперечную. Главная ось проходит по направлению расположении элементов, то есть не обязательно что бы главной осью была только вертикальная линия, все зависит от расположения элемента.

3.Какое направление по умолчанию имеет главная ось?

Вертикальное, с лева на право

4.Какое направление по умолчанию имеет поперечная ось?

С верху вниз

5.По умолчанию какие размеры имеет flex элемент?

Зависит от содержимого (?)

6.Что такое flex контейнер?

Родительский блок, который включает в себя flex элементы и содержат свойства, предназначенные для описания принципов работы flex элементов.

7.Что делает свойство flex-direction?

Свойство, которое задает направление главной оси

8.Какие значения у свойства flex-direction вы знаете?

Row, row-reverse, column, column-reverse. Первое это значение по умолчанию, то есть с лева на право. А column с верху вниз. Соответственно reverse просто зеркалит

9. Значение space-evendly?

Flex элементы размещены на одинаковое расстояние между собой

10.Чем занимается свойство justify-content?

Задает выравнивание

11.Что делает свойство order?

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

12.Какое значение по умолчанию имеет свойство order?

0

13.Что нужно написать, чтобы поменять местами 1 и 5 элемент?

В первый див пишем

order:1

А в пятый:

order: -5;

14. Что происходит если элементы не помещаются по ширине?

Они выходят за рамки (дозволенного пх)

15. Какие значения свойства flex-wrap вы знаете?

1) no-wrap: не переносить

2) wrap: переносить

3) wrap-reverse: на следующую строчку переносятся элементы, которые были в начале контейнера

16. Чем занимается свойство align-items?

Задает выравнивание элементов относительно поперечной оси

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

stretch: при котором flex-элементы растягиваются по всей высот или по всей ширине flex-контейнера. То есть с этим значением flex элементы занимают все доступное место(пространство) в контейнере

18. В чем различие align-items и align-content?

Отличие align-content от align-items в том, что свойство влияет на ряды, а не на отдельные элементы.

19. Какое свойство и значение обязательно для работы flex-box?

display: flex;  

20. Как переместить на следующий ряд, определенный flex-items не изменяя размера flex-box?

С свойства flex-wrap

21. Что делает свойство flex-flow?

свойства flex-wrap и flex-direction можно задать с этого свойства. Как аналогию можно взять border, где я могу конечно задать отдельно толщину, цвет и так далее, но этим свойством я делаю это все одновременно

22. Что делает свойство flex-grow?

позволяет указать коэффициент увеличения элемента относительно свободного пространства внутри флекс-контейнера.

23. Что делает свойство align-self?

работает точно так же, как и align-items только задает только для одного элемента. Пишется к самому элементу

24. Как называются точки начала осей и конца осей?

Main start/main end, Cross start/cross end

25. Что делает свойство flex-basis?

задает базовую ширину флекс-элемента, относительно которой будет происходить растяжение

Объяснение: