Конспект «Сетки»
Автор: Btw1 • Июнь 15, 2022 • Лекция • 499 Слов (2 Страниц) • 167 Просмотры
Конспект «Сетки». Раздел 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 (рамка справа и слева).
Выравнивание по центру
В вёрстке часто требуется расположить элемент по центру, или, как говорят разработчики, отцентровать элемент. Для этого требуется:
...