Дизайн HTML-страниц. Язык CSS (ч.13)
@honey_and_moneyПродолжаем разбираться с flexbox.
В этой статье я хочу привести вам пример с другим html-кодом, в отличие от предыдущей.
Создадим 8 одинаковых блоков:
Ну и простенький CSS:
Задал рамку, внутренние отступы границ блока от текста, ну и внешние отступы, чтобы блоки не слипались.
Выглядит это все вот так:
Давайте теперь перейдем к рассмотрению интересных свойств:
flex-wrap: wrap | nowrap | wrap-reverse;
Разберем по порядку:
Данное свойство прописывается в классе контейнера, т.к. оно применяется ко всем дочерним блокам элемента. Что это свойство делает:
В случае wrap - при сужении окна браузера переносит на новую строку вылезающие за границы экрана блоки.
Выглядеть будет так:
Соответственно параметр nowrap запрещает перенос и элементы становятся намертво приклеенными к странице.
wrap-reverse работает точно так же как и обычный wrap, но только в случае переноса каких-то блоков, переносит их не на строку вниз, а вверх:
(Довольно-таки странное свойство, но пригодиться может)
Другой тип свойств:
Все они отвечают за выравнивание по вертикали.
align-content: flex-start; - ряд блоков прижат к верху страницы (по умолчанию)
align-content: flex-end; - ряд блоков прижат к низу страницы
align-content: center; - ряд блоков располагается посередине контейнера
align-content: space-between; - равномерные пробелы между блоками
align-content: space-around; - одинаковые пробелы вокруг каждого блока
align-content: stretch; - блоки занимают всю высоту контейнера.
ВАЖНО! - все эти свойства работают только если есть свойство flex-wrap: wrap или wrap-reverse
Объясню на примере: сейчас у нас находится 8 блоков в контейнере. Высота для этого контейнера не задана, следовательно он имеет высоту такую, чтобы в ней уместились наши блоки. Чтобы увидеть способы выравнивания по вертикали, нам надо задать высоту контейнеру height: 700px; (не обязательно 700, можно любое другое значение), по этой "высоте" мы и будем двигать наши ряды блоков.
И еще - свойства выравнивания по вертикали проявляются только в том случае, когда у нас хоть один элемент перенесен на новою строку (из-за flex-wrap)
Так выглядит align-content: flex-end;
Наиболее интересными свойствами тут я считаю вот эти:
align-content: stretch;
Выглядит так:
Блоки переносятся на новую строку и одновременно с этим занимают всю высоту контейнера.
space-between;
Выглядит так:
Ну и space-around - добавляются пробелы перед первой строкой блоков и последней.
Ну как вам, почувствовали мощь адаптивной верстки? А это всего лишь начало. Но уверяю вас - сейчас вы выучите все эти основы, попрактикуете их и потом сможете пользоваться универсальными библиотеками для верстки, которые сильно упрощают жизнь. Самое главное - не пропустить основы, это фундамент
@honey_and_money - Завтра не наступит никогда. Делай сегодня по максимуму и двигайся к своей мечте!