CSS Layout

Question 1

Как задать три grid-столбца шириной 100px (2 варианта)?

Answer 1

grid-template-columns: 100px 100px 100px;
или
grid-template-columns: repeat(3, 100px);

Question 2

Как задать три grid-ряда высотой 100px?

Answer 2

grid-template-rows: 100px 100px 100px;

Question 3

Как задать промежутки между grid-колонками или grid-рядами?

Answer 3

column-gap или row-gap

Question 4

Что такое gap в grid?

Answer 4

row-gap + column-gap

Question 5

Что будет, если флекс-элементов вконтейнере станет больше, чем может уместиться водин ряд?

Answer 5

1) Они будут сжиматься доминимально возможной ширины
2) Даже если имзадать ширину явно, механизм флексбокса может еёуменьшить
3) Если они перестанут помещаться вконтейнер ипосле уменьшения, тоони выйдут заего пределы, нопродолжат располагаться водин ряд

Question 6

Какие особенности у align-content?

Answer 6

1) Действует только при многострочном, определяет расстояние между строками
2) Свойствоalign-content«перекрывает» заданное значениеalign-items
3) Отображение строк приalign-content: stretchзависит отзначенияalign-items

Question 7

Как работает margin: auto в flex?

Answer 7

margin: auto;влияет наположение флекс-элементов наобеих осях, атакже «ломает»механизмы выравнивания, ведь выравнивание происходит, когда есть свободное место. Ноесли всё свободное место «перетекло» вавтоматический отступ, тоивыравнивать нечего.

Question 8

Что такое flex-basis?

Answer 8

Задаётбазовый размерфлекс-элемента или размер вдоль главной оси

Question 9

Как задать координаты колонки grid?

Answer 9

grid-column-start: 1;
grid-column-end: 3 ;
или
grid-column: 1 / 3;

Question 10

Как задать сетку grid?

Answer 10

grid-template-areas: “a a a” “b b b”;

grid-area: a;

Question 11

Как работаю margin в grid и flex?

Answer 11

Складываются, а не схлопываются

Question 12

Как считается высота flex по-умолчанию?

Answer 12

Выравнивается под самый высокий

Question 13

Как выровнять grid элементы по вертикали?

Answer 13

align-items

Question 14

Как выровнять grid элемент по горизонтали?

Answer 14

justify-self

Question 15

Как разбить на неизвестное число колонок?

Answer 15

grid-template-columns: repeat(auto-fit, 100px);

Question 16

Как растянуть grid элемент на две колонки?

Answer 16

grid-column: span 2;

Question 17

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

Answer 17

grid-auto-flow: column dense;

Question 18

Для чего нужен flex-flow

Answer 18

flex-direction + flex-wrap

Question 19

Какие значения у align-items

Answer 19

stretch, flex-start, flex-end, center, baseline

Question 20

Какие значения у align-content

Answer 20

flex-start, flex-end, stretch, space-around, space-between

Question 21

Особенность align-content

Answer 21

Работает только с многострочными flex

Question 22

Как считается flex-grow

Answer 22

flex-grow берет оставшееся место, вычитает margin и делит его на общее количество flex-grow значений (любое неотрицательное). Полученный показатель умножается на соответствующее каждой части значение flex-grow и полученный результат добавляется каждому дочернему элементу с его изначальной шириной.

Question 23

Как работает flex-basis

Answer 23

1) flex-basis ограничивается min-width и max-width
2) Если flex-basis не указан, то он опирается на свойство width этого же элемента
3) А если уже и width не указан, то flex-basis опирается ширину, посчитанную по контенту
4) когда указан flex-basis, width наших боксов игнорируется, и его можно не указывать

Question 24

Что такое flex-basis?

Answer 24

Это размер flex-элементов перед тем, как они разместятся в контейнере. Это идеальный или предположительный размер элементов. Но flex-basis это не гарантированный размер!

Question 25

Из чего состоит свойство flex?

Answer 25

flex-grow + flex-shrink + flex-basis

Question 26

Как работает margin с flexbox

Answer 26

margin с параметром auto в flex контейнере поглощает свободное пространство. Выставление свойства margin flex-потомку, оттолкнет его в указанном направлении

Question 27

Что делает flex: 0 1 auto?

Answer 27

Значение по-умолчанию. Элемент немного сжимался, когда места недостаточно, но не тянулся шире чем ему надо

Question 28

Что делает flex: 1 1 auto?

Answer 28

flex: auto. Если мой flex-элемент должен тянуться для заполнения всего доступного пространства, и немного сжиматься если места не хватает

Question 29

Что делает flex: 0 0 auto?

Answer 29

flex: none. Элемент не меняет размеры

Question 30

Какие особенности у отрицательных margin?

Answer 30

Отрицательные margin-left/top сдвигают элемент влево-вверх. Остальные элементы это учитывают, в отличие от сдвига через position.

Отрицательные margin-right/bottom заставляют другие элементы думать, что блок меньше по размеру справа-внизу, чем он на самом деле и будет утягивать их влево и вверх поверх себя