CSS Layout Flashcards
Как задать три grid-столбца шириной 100px (2 варианта)?
grid-template-columns: 100px 100px 100px;
или
grid-template-columns: repeat(3, 100px);
Как задать три grid-ряда высотой 100px?
grid-template-rows: 100px 100px 100px;
Как задать промежутки между grid-колонками или grid-рядами?
column-gap или row-gap
Что такое gap в grid?
row-gap + column-gap
Что будет, если флекс-элементов вконтейнере станет больше, чем может уместиться водин ряд?
1) Они будут сжиматься доминимально возможной ширины
2) Даже если имзадать ширину явно, механизм флексбокса может еёуменьшить
3) Если они перестанут помещаться вконтейнер ипосле уменьшения, тоони выйдут заего пределы, нопродолжат располагаться водин ряд
Какие особенности у align-content?
1) Действует только при многострочном, определяет расстояние между строками
2) Свойствоalign-content«перекрывает» заданное значениеalign-items
3) Отображение строк приalign-content: stretchзависит отзначенияalign-items
Как работает margin: auto в flex?
margin: auto;влияет наположение флекс-элементов наобеих осях, атакже «ломает»механизмы выравнивания, ведь выравнивание происходит, когда есть свободное место. Ноесли всё свободное место «перетекло» вавтоматический отступ, тоивыравнивать нечего.
Что такое flex-basis?
Задаётбазовый размерфлекс-элемента или размер вдоль главной оси
Как задать координаты колонки grid?
grid-column-start: 1;
grid-column-end: 3 ;
или
grid-column: 1 / 3;
Как задать сетку grid?
grid-template-areas: “a a a” “b b b”;
grid-area: a;
Как работаю margin в grid и flex?
Складываются, а не схлопываются
Как считается высота flex по-умолчанию?
Выравнивается под самый высокий
Как выровнять grid элементы по вертикали?
align-items
Как выровнять grid элемент по горизонтали?
justify-self
Как разбить на неизвестное число колонок?
grid-template-columns: repeat(auto-fit, 100px);
Как растянуть grid элемент на две колонки?
grid-column: span 2;
Как заполнить grid автоматический по колонкам?
grid-auto-flow: column dense;
Для чего нужен flex-flow
flex-direction + flex-wrap
Какие значения у align-items
stretch, flex-start, flex-end, center, baseline
Какие значения у align-content
flex-start, flex-end, stretch, space-around, space-between
Особенность align-content
Работает только с многострочными flex
Как считается flex-grow
flex-grow берет оставшееся место, вычитает margin и делит его на общее количество flex-grow значений (любое неотрицательное). Полученный показатель умножается на соответствующее каждой части значение flex-grow и полученный результат добавляется каждому дочернему элементу с его изначальной шириной.
Как работает flex-basis
1) flex-basis ограничивается min-width и max-width
2) Если flex-basis не указан, то он опирается на свойство width этого же элемента
3) А если уже и width не указан, то flex-basis опирается ширину, посчитанную по контенту
4) когда указан flex-basis, width наших боксов игнорируется, и его можно не указывать
Что такое flex-basis?
Это размер flex-элементов перед тем, как они разместятся в контейнере. Это идеальный или предположительный размер элементов. Но flex-basis это не гарантированный размер!
Из чего состоит свойство flex?
flex-grow + flex-shrink + flex-basis
Как работает margin с flexbox
margin с параметром auto в flex контейнере поглощает свободное пространство. Выставление свойства margin flex-потомку, оттолкнет его в указанном направлении
Что делает flex: 0 1 auto?
Значение по-умолчанию. Элемент немного сжимался, когда места недостаточно, но не тянулся шире чем ему надо
Что делает flex: 1 1 auto?
flex: auto. Если мой flex-элемент должен тянуться для заполнения всего доступного пространства, и немного сжиматься если места не хватает
Что делает flex: 0 0 auto?
flex: none. Элемент не меняет размеры
Какие особенности у отрицательных margin?
Отрицательные margin-left/top сдвигают элемент влево-вверх. Остальные элементы это учитывают, в отличие от сдвига через position.
Отрицательные margin-right/bottom заставляют другие элементы думать, что блок меньше по размеру справа-внизу, чем он на самом деле и будет утягивать их влево и вверх поверх себя
