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

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

@honey_and_money

Сегодня последняя статься с flexbox. Рассмотрим оставшиеся параметры.

Начнем с html-кода:


Теперь у каждого блока по два класса - класс "block" одинаковый у всех и классы "elem-1" "elem-2" и так далее - у каждого блока свои.

Помимо этого надо изменить и CSS:


Что имеем на выходе:

Контейнер, который содержит пять блоков. Они отображаются как flex-элементы, у каждого блока закруглены края. Задан фон контейнера и каждого блока в отдельности. У каждого блока задана ширина в 100 пикселей.

Для контейнера задано свойство flex-wrap: wrap (разбирали в предыдущих статьях) - говорит о том, что при сужении экрана, те элементы, которые не влезают в ширину страницы, будут переносится на новую строку.

Выглядит это все так:

Ну и пример, когда все пять элементов не влезают в одну строку:

Вроде бы выглядит красиво, но можно сделать и лучше. В этом нам поможет свойство flex-grow

Давайте сразу добавим его в описание класса "block":

Теперь при сужении окна браузера и переносе элементов, они красиво растягиваются на всю ширину экрана, занимая равную ширину:

Да, можно не прибегать к такому свойству, просто не задавая начальную ширину блокам в 100 пикселей. Но вся прелесть этого свойства кроется в другом.

Давайте уберем flex-grow из описания класса "block" и добавим описание классов elem-1 , elem-2, elem-3 и так далее:


Ну и посмотрим на саму страницу:

Т.к. у меня достаточно большой дисплей, может быть не очень заметно, но сейчас первый блок стал немного больше остальных.

При сужении экрана вы увидите, что блок под номером один сужается в несколько раз быстрее, чем все остальные. Как раз таки он сужается в пять раз быстрее, это мы и указали в нашем свойстве flex-grow

Это свойство редко применяется, но лишнюю красивость сайту можно очень легко добавить с помощью такого параметра.

Можно одновременно задавать разные flex-grow разным блокам в одном контейнере - они никак не конфликтуют.

Ну и аналогичное свойство для динамики в изменении ширины блоков

flex-shrink

Изменим наш CSS:

Тут я убрал у контейнера свойство flex-wrap: wrap; и добавил классу elem-1 параметр flex-shrink: 2;

Что делает это свойство: при сужении окна браузера ширина первого элемента будет уменьшаться в два раза быстрее по сравнению с остальными. Переноситься элементы на новую строку не будут. Они просто дойдут до своего минимально возможного размера.


В чем разница между flex-grow и flex-shrink?

Первое свойство изменяет начальные размеры блоков (у какого блока flex-grow больше, тот больше и по ширине в сравнении с остальными). А flex-shrink в свою очередь не изменяет начальной ширины блоков, он просто характеризует с какой пропорциональностью будут сужаться блоки при уменьшении размера окна браузера.


Ах, да, и последнее:

Задавать ширину width: 100px; в классе "block" лучше через свойство flex-basis.

Никакого принципиального отличия нет, тут просто разница в удобстве - когда вы будете читать свой код через несколько месяцев, а может и лет, вам будет понятно, что именно вот этот параметр относится к ширине flex-элементов, а не к чему либо еще.

Продублирую CSS код с исправлениями:


Ну что, на этом с flexbox'ом все! Осталось только попрактиковаться - будем делать полноценный шаблон сайта ближе к выходным.


@honey_and_money - Стоит только начать и тебе понравится!