Время показало, что многие мои студенты испытывают трудности с flex-box и другими типами элементов.
Вероятно, это связано с тем, что человек, который только-только начал погружаться в мир верстки и дизайна подсознательно
ищет какие-то повторяющиеся паттерны в правилах и законах этого мира. Он открывает CSS и смотрит - правило указывается через
селектор, селектор обращается к элементу, затем элемент меняет своё поведение. Такое можно сказать и про правило display с его
самыми базовыми значениями inline, block и inline-block.
И тут перед человеком появляется flexbox. Да, по большому счету (как и значения inline, block и inline-block для display) значение flex
тоже меняет сам элемент к которому он указан. Но при этом, самые видимые изменения в поведении происходят именно с потомками этого элемента.
Они внезапно становятся в ряд, а потом их можно повернуть в столбец. Или даже поставить шиворот-навыворот, то есть задом наперед.
И всё это не изменяя HTML, а просто манипулируя правилами в CSS.
И очень часто я наблюдаю как студенты начинают использовать flex-box для всего подряд.
Очень распространённая история когда есть контейнер, внутри которого находятся несколько дочерних элементов.
Контейнеру задаются правила display: flex; и flex-direction: column; - казалось бы всё верно - дочерние элементы встанут в колонку.
Однако, дочерние элементы, которые являются по умолчанию блочными за счет тегов в HTML, сами по себе встали бы в колонку. При этом, каких либо других манипуляций не происходит. Переноса элементов в другую колонку не указано, какой-то манипуляции с пространством с помощью flex так же нет.
Это случаи, когда неоправданно используются правила, когда студент забывает о базовых свойствах и поведении элементов с которыми он работает.
Итак, ситуация в целом описана. Теперь встает резонный вопрос, что делать?
При построении структуры страницы или её конкретных частей стоит сначала понять чего вы ожидаете.
Какие элементы вы собираетесь использовать? Посмотрите, какие это элементы по умолчанию? Строчные, блочные или строчно-блочные?
Вспомните, какое поведение свойственно тем или иным элементам.
Например:
Строчные элементы занимают только то пространство, что необходимо для отображения их контента, являются частью строки и не переносятся
на следующую строку, пока в текущей хватает места. Из первой части этого утверждения следует, что им нельзя установить width или height,
так же им нельзя задать вертикальные внешние отступы.
Тем не менее, строчные элементы помещающиеся в одной строке можно "раздуть" с помощью padding и даже подёргать влево вправо с помощью margin.
Проделывать такое для строчных элементов занимающих, к примеру, полторы строки было бы странно. Этими элементами можно управлять как текстом, правилами text-align и font-size (указанными родителю) и увеличить занимаемую ими высоту с помощью межстрочного интервала (но всей строке).
Блочные элементы же имеют и высоту (которую можно указать, но по умолчанию она расчитывается по контенту) и ширину (которую можно указать, но по умолчанию она занимает
всю доступную ширину контентной области родительского элемента). Блочные элементы - структурные кирпичики. Они становятся по умолчанию в колоночку.
Их можно двигать с помощью margin друг относительно друга как по горизонтали, так и по вертикали. Но переноса на другую колонку к сожалению нет.
Заострять внимание на строчно-блочных их братьях я не буду. Не уверена, что вновь напоминать свойства блочных и строчных тоже было необходимо.
Когда Вы определитесь с тем, какие элементы (фундаментально) будут использованы и какое поведение Вы от них ожидаете, тогда
Вы сможете написать CSS-код без излишних правил.
Дерзайте, и не останавливайтесь. Тогда у вас всё обязательно получится!