Конспект «Сетки»

Конспект «Сетки». Раздел 2

Flex

Чтобы использовать особые свойства флексов (от английского flexible — «гибкий»), нужно с помощью display изменить тип элемента:

display: flex;

Бокс с типом flex называют флекс-контейнером, а его дочерние боксы — флекс-элементами.

Флекс-элементы автоматически выстраиваются вдоль главной оси. По умолчанию она направлена слева направо.

[pic 1]

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

По умолчанию все флекс-элементы имеют одинаковую высоту, подстраиваясь под самый высокий элемент в ряду. Самый простой способ выровнять отдельный элемент по нижней границе — добавить ему автоматический внешний отступ сверху. В этом случае флекс-элемент уменьшит свою высоту под содержимое и прижмётся к низу родительского контейнера.

Свойство justify-content

justify-content — свойство флекс-контейнера, которое говорит, как расположить флекс-элементы на главной оси.

У него может быть несколько значений:

• flex-start — флекс-элементы располагаются в начале главной оси (по умолчанию — слева);
• flex-end — флекс-элементы располагаются в конце главной оси (по умолчанию — справа);
• center — флекс-элементы располагаются в центре главной оси;
• space-around — свободное пространство распределяется вокруг флекс-элементов;
• space-between — свободное пространство распределяется между флекс-элементами, при этом первый и последний элемент прижимаются к краям флекс-контейнера.

Свойство width

Чтобы указать ширину элемента, используют свойство width:

width: 550px;

По умолчанию свойство width задаёт ширину содержимого бокса (content) и не учитывает внутренние отступы и ширину рамки.

[pic 2]

.box {

  width: 100px;

  padding-left: 20px;

  padding-right: 30px;

  border: 5px solid black;

}

В этом случае полная ширина бокса окажется 160px, потому что ширина содержимого сложится с шириной отступов и рамок: 100px + 20px + 30px + 5px + 5px (рамка справа и слева).

Выравнивание по центру

В вёрстке часто требуется расположить элемент по центру, или, как говорят разработчики, отцентровать элемент. Для этого требуется: