Дизайн HTML-страниц. Язык CSS (ч.13)

Продолжаем разбираться с 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 - Завтра не наступит никогда. Делай сегодня по максимуму и двигайся к своей мечте!