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

Еще чуть-чуть и мы закончим изучение flexbox.

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

Я опять переписал html:

Теперь блоков будет пять. У всех одинаковый класс - "block"

Ну и по традиции я сменил CSS:

Добавил фоновый цвет контейнеру, в котором располагаются наши блоки.

У блоков я убрал рамку, добавил фоновый цвет и цвет текста в блоке сделал белым (color: white;). Внешние отступы по 10 пикселей со всех сторон. Внутренние - по 50, тоже со всех сторон. Сделал закругление границ каждому блоку (border-radius: 5px;). Ну и изменил ширину (width) - теперь она 100%. Если бы у контейнера не было свойства flex, то каждый блок занимал бы всю ширину страницы (width: 100%) и каждый блок занимал бы целую строку.

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

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

При сужении окна браузера наши блоки тоже начинают сужаться. Но только до определенной ширины. Эта ширина определяется суммой всех отступов слева и справа от блоков (как внешних так и внутренних.)

То есть мы можем это все легко посчитать: margin: 10px; - значит у каждого блока слева и справа есть по 10 пикселей. Блоков 5, следовательно 5 * 2 * 10 = 100 пикселей занято внешними отступами.

padding: 50px; - точно как и с внешними отступами, у каждого блока есть внутренние отступы слева и справа: 5 * 2 * 50 = 500 пикселей.

Значит вся наша строка с блоками занимает минимум 600 пикселей в ширину (мы еще не прибавляли размер шрифта, он доже добавит к ширине какое-то значение)

А вообще чтобы так не заморачиваться можно открыть консоль браузера (Ctrl+Shift+C) и с открытой консолью сужать окно браузера. Слева вверху окна браузера будет написано значение ширины и высоты (в формате AxB, где A - текущая ширина экрана, B - высота)

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

У меня такой граничной шириной оказались 656 пикселей.

Согласитесь, не удобно пользоваться сайтами у которых есть такой ползунок для прокрутки по горизонтали. Я хочу сделать так, чтобы при ширине экрана, когда блоки вылезают за границу окна браузера, они переставали иметь свойство flexbox'a и просто выстраивались в столбик как происходит без свойства flex.

В этом нам помогут так называемые media-свойства в CSS.

Пишутся они так:

Описание класса "container" мы заключили в media-свойство. В условиях этого свойства я указал min-width: 656px;

Что это значит? - Это говорит о том, что свойства, которые находятся внутри фигурных скобок, принадлежащих media-свойству, будут выполняться только в том случае, если соблюдено условие этого самого media-свойства.

Что в нашем примере: flexbox будет работать только для тех экранов, у которых ширина не менее 656 пикселей.

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

Решается это все очень просто:

Я сделал два описания класса "container" - одно описание работает только если выполнено media-условие, второе работает всегда.

Если вы сейчас посмотрите на страницу, размер которой меньше 656 пикселей, то вы увидите, что наши блоки растянуты на всю страницу и опять появился этот неприятный ползунок влево-вправо. Это все из-за свойства width: 100% - блоки начинают занимать 100% ширины экрана, когда отсутствует свойство flex.

Измените это свойство на width: 20% и сможете увидеть действие media-свойство в деле.

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

@honey_and_money - Какими бы гениальными твои идеи ни были, тебе все равно нужны знания чтобы их реализовать