Макет гибкого модуля

Блок модуля

Если в подборе селекторов для вывода блоков на экран всё получилось успешно, то вероятно, получилась подобная картина.

Вариант правильно размеченного макета и его кода CSS.

Цвета блоков каждый выбирал самостоятельно и стиль оформления кода CSS может несколько отличаться. Но это не меняет суть дела. Давайте оценим макет, чтобы продумать план его изменения.

В свойствах CSS размеры не прописаны ни у одного элемента. Поэтому блоки находятся в потоке один над другим и занимают всю ширину родителя, то есть body. Высота каждого равна высоте его контента. Реальный размер присутствует только у картинки-затычки (100×100).

Требуется, чтобы оба блока анонса находились в одной строке. Для этого не будем назначать им ни float, ни position. Их родительскому блоку назначим свойство displayflex.

Скопируйте правило module_main necessary из блока «Промежуточная расцветка» и вставьте его первым в блок «Разметка макета». В нём замените свойство background-color на назначенное.

Блоки анонсы теперь изъяты из потока, выстроились в строку и потеряли свою ширину, как и все строчно-блочные элементы. Их ширина теперь равна контенту. Судя по расцветке блоков, ширина внешних блоков модуля и анонсов осталась прежней, 100% родительской ширины.

Самое время наполнить анонсы контентом. Возьмите рекомендованное количество абзацев и поместите их в каждый блок анонса. В зависимости от размера контента ширина блоков изменится.

Разметка flex-контейнера

Выравнивание по главной оси

А теперь давайте вспомним о свойстве flexible.

Имеется четыре цветных блока flex-элементы. Уже известно, что все они находятся во flex-контейнере и выстраиваются вдоль главной оси (main axis). Ею управляет свойство flex-direction.... По умолчанию его значение row и главная ось направлена по горизонтали слева направо.

Можно заменить значение свойства на row-reverse (назад, в обратном направлении), но это не значит, что элементы поменяют свой порядок. Поток, по которому выстраиваются элементы во flex-контейнере представляется трубой.

Вода в трубе всегда течёт в одном направлении, но можно повернуть саму трубу. Свойство flex-direction... поворачивает главную ось. А flex-элементы всегда выстраиваются по её направлению. главную ось можно повернуть и вертикально сверху вниз column или снизу вверх column-reverse, и продолжать эксперименты со свойством justify‑content....

У flex-контейнера есть особенность. Существует ещё одна поперечная ось (cross axis) под углом 90° к главной оси. Если размер flex-элемента не задан явно (width или height), то его ширина или высота вытягиваются по поперечной оси на 100% размера flex-контейнера.

Ширине и высоте flex-элементов можно менять значения и даже назначать auto.

Полигон. Площадка 3 выравнивание по главной оси

1
2
3
4
Если «Площадка» работает неправильно, сообщите руководителю.

«Вертеть трубу» на этой площадке пока не столь интересно потому, что все четыре блока имеют ширину по 25%. То есть все вместе они плотно занимают всю ширину родительского элемента. Интереснее будет, если им назначить меньшую суммарную ширину, например, 20% × 4 = 80%. Останется ещё 20% свободного пространства.

Свободным пространством управляет свойство justify‑content... (выравнивание контента). Оно распределяет положение flex-элементов на главной оси разными способами. Значений у этого свойства пять.

  1. flex-start flex-элементы плотно прижимаются друг к другу, выстраиваясь от границы flex-контейнера в начале главной оси.
  2. flex-end flex-элементы плотно прижимаются друг к другу, выстраиваясь до границы flex-контейнера в конце главной оси.
  3. center flex-элементы плотно прижимаются друг к другу, выстраиваясь вдоль главной оси в центре между границами flex-контейнера.
  4. space-between крайние flex-элементы прижимаются началу и концу главной оси, а остальные распределяются между ними через равные промежутки.
  5. space-around flex-элементы распределяются так, чтобы расстояние между любыми двумя соседними было одинаковым, а расстояние между крайними и границами flex-контейнера в половину от расстояния между соседними.

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

Редактирование модуля

Теперь можно приступить к размещению анонсов в модуле. Уже известно, что им нужно задать ширину, которая суммарно будет у́же ширины section. Если предполагается резиновый (жидкий) дизайн макета, то ширину удобнее задавать в процентах.

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

А какие элементы станут flex-элементами? Выберите правило, в котором нужно ограничить их ширину, например до 48%.

Добавьте в правило flex-контейнера способ выравнивания flex-элементов согласно дизайну вашего макета.

Если удалось назначить ширину, то стоит задуматься над минусами подобного подхода. Окно браузера может сжиматься, например, повернуть планшет в вертикальное положение. Сожмутся все блоки на странице начиная с BODY и других.

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

В CSS есть свойство ограничения ширины сжатия: min-width... (минимальная ширина). Например, у́же 300px не сжиматься. Добавьте это свойство в правило для flex-элементов и попробуйте окно браузера сжимать по горизонтали.

Сворачивание строк

Снова оцениваем состояние модуля. Представим смартфон. Его размер меньше планшета и сжатые до ограничения блоки могут не поместиться в кадр. Чтобы увидеть второй анонс придётся пользоваться горизонтальной полосой прокрутки.

В технологии Flexible есть решение для подобных ситуаций. Это свойство flex-wrap.... Оно управляет flex-элементами при изменении ширины flex-контейнера и у него три свойства.

  1. nowrap. Все flex-элементы сжимаясь, остаются в одной строке.
  2. wrap. Крайние flex-элементы, не помещающиеся во flex-контейнер, как слова в редакторе, спрыгивают на новую строку. Поток flex-элементов сворачивается в границах flex-контейнера, выстраиваясь в направлении главной оси.
  3. wrap-reverse. Поток flex-элементов сворачивается, как и с предыдущим значением. Но в действие вступает поперечная ось (cross axis), которая всегда перпендикулярна главной оси. По главной оси направление элементов сохраняется, а по поперечной — меняется на противоположное.

Полигон. Площадка 3 сворачивание flex-элементов

1
2
3
4
Если «Площадка» работает неправильно, сообщите руководителю.

Если flex-элементы выстроены по горизонтали в прямом или в обратном направлении, установите ширине элемента flex-box фиксированное значение (100%), а высоту — auto.

И наоборот, если главная ось вертикальна, то ширине flex-box установите auto, а высоте —  (340px).

Для того чтобы правильно подобрать фиксированные значения, ориентируйтесь на ширину и высоту условного BODY прямо над цветными блоками в левом верхнем углу. В процессе изменения размеров элементов ширина и высота могут изменяться.

Редактирование модуля

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

Выравнивание
по поперечной оси

Обратите внимание на контент блоков с анонсами. Они выглядят не аккуратно. Элементы стандартно сдвинуты влево. Второй блок, хоть и вытянут на всю высоту, но его контент прижат к верху.

Можно поискать стандартные свойства для приведения контентов к желаемому внешнему виду. Но мы рассматриваем технологию Flexible. Что мы о ней знаем?

  1. Все flex-элементы выстраиваются по главной оси.
  2. Главную ось можно развернуть вертикально.
  3. Можно распределять и выравнивать flex-элементы вдоль flex-контейнера по поперечной оси.

Задача. Все элементы контента обоих анонсов должны стать flex-элементами

Решение. Обоим родительским элементам с контентом анонсов нужно назначить свойство displayflex. И для них уже имеется правило с цветом фоновой заливки.

Все элементы контента выстроились в строку, так как по умолчанию направление главной оси слева направо. Её нужно развернуть по вертикали свойством flex-directioncolumn.

Но проблемы не решены: прижатый к верху блока контент второго анонса, и ужасно растянутое изображение. Безразмерные элементы вытягиваются на 100% flex-контейнера по поперечной оси.

Зададим размер контенту анонсов. Первым делом для него нужно создать правило, его ещё нет.

  1. В селекторе нужно указать все элементы, какие только есть в анонсе: и заголовок, и изображение, и текстовые, и подвал. В CSS такой имеется — это * (звёздочка).
  2. Но не все на всей странице, а только в элементе с классом tool.
  3. Причём в анонсе будет располагаться фрагмент статьи со своими элементами внутри. Правило должно распространяться только на элементы первого уровня в элементе с классом tool=.... На его «детей». Селектор ... > ....

Соберём комплексный селектор из трёх разных: tool > *. Получился требуемый селектор. Его можно прочесть с конца так: для всех элементов на первом уровне в элементе класса tool.

Правило почти готово. Только в нём нужно указать ширину в процентах, например 80%.

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

Полигон. Площадка 3 выравнивание по поперечной оси

1
2
3
4
Если «Площадка» работает неправильно, сообщите руководителю.

У свойства align‑items... значение по умолчанию — stretch. Если оно не задано, то все flex-элементы без явно назначенных свойств (width и height) будут растягиваться по поперечной оси. Обратите внимание на заданные свойства в правилах второго и третьего элементов.

У этого свойства 5 значений и можно выбрать подходящее.

  1. stretch: flex-элементы растягивается по поперечной оси, если у них явно не заданы ширина или высота.
  2. flex-start: flex-элементы прижимаются к границе flex-контейнера у начала поперечной оси.
  3. flex-end: flex-элементы прижимаются к границе flex-контейнера у конца поперечной оси.
  4. center: flex-элементы выстраивают свои центры по центру поперечной оси.
  5. baseline: для flex-элементов с текстом при горизонтальной главной оси блоки выравниваются по базовым линиям первых строк.

Редактирование модуля

У контента главная ось проходит вертикально сверху вниз. Поперечная — горизонтально. Все блоки, ограниченные шириной в 80% нужно выровнять центрами по поперечной оси. Правило для них имеется, осталось только в него добавить свойство с выбранным значением.

Если всё выполнено правильно, то внешний вид обоих модулей преобразился и он уже не выглядит как сделанный тяп-ляп. Осталось выравнять высоту контента второго блока с анонсом. Но об этом далее.

Растяжка

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

Свойство flex‑grow... помогает заполнять свободное, незанятое или заполненное растянутыми элементами пространство по направлению главной оси. Значение свойства по умолчанию 0 ноль и другие положительные числа. Сумма всех чисел назначенных элементам в свойстве указывает на какое количество частей будет поделено свободное пространство.

Например, у одного flex-элемента в свойстве указана 1 единица, а у остальных значение не назначено, то есть 0. Это значит, что всё свободное пространство будет добавлено и увеличит размер по главной оси только одному flex-элементу. Причём совершенно неважно с краю он или в середине — остальные раздвинутся.

Если одному flex-элементу назначить 1, а другому 2, то свободное пространство разделится на три равные части. Одному достанется одна часть а другому две. Экспериментируйте.

Полигон. Площадка 3 растягивание

1
2
3
4
Если «Площадка» работает неправильно, сообщите руководителю.

На примере с горизонтальной главной осью Обратите внимание, что у flex-элемента с назначенным ненулевым свойством flex‑grow... браузер совершенно игнорирует и фиксированные, и ограниченные размеры.

С вертикальной главной осью flex-элементы с высотой по умолчанию, равной их контенту могут быть вытянуты на всю высоту flex-контейнера. Но при этом пространство заполненное растянутыми flex-элементами будет считаться свободным и может перераспределяться между другими с таким же свойством flex‑grow....

Есть ещё одна роль у элементов с назначенным свойством flex‑grow... и ненулевым значением. Если flex-элемент со значением свойства 1 останется один, то всё свободное пространство достанется ему. Если их два и у одного единица, а у другого двойка — второй будет в два раза больше.

А если единица у всех четырёх — они окажутся совершенно одинакового размера. Убедитесь в этом на Полигоне, предварительно повернув глваную ось по вертикали.

Редактирование модуля

При всей успешности разметки модуля, ещё остались мелкие недоработки. Мы уже научили блоки адаптироваться под узкие экраны, выстраиваясь в колонку. Но попробуйте медленно сжимать окно по ширине. Найдётся место, где второй анонс уже спрыгнул под первый, а справа от них имеется свободное пространство. Вот не повезёт тем, чьи смартфоны имеют такую ширину.

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

Правило для flex-элементов с анонсами есть. Название свойства известно. Осталось только вписать определённое число и оно будет присвоено обоим. А уж они в разных строках поделят свободное пространство в свою пользу.

Попробуйте теперь сжимать-расширять браузер. Задача решена.

Подведение итога

Кто такие флексы

Flex-контейнер — элемент с привычным поведением. Снаружи он обладает свойствами блочного или строчно-блочного элемента. А внутри у него создаётся отдельный flex-поток, отличный от внешнего с окружающим элементами.

Flex-поток, может менять направление по четырём сторонам. Управляет этим главная ось, а управлять flex-элементами в потоке помогает перпендикулярная к ней поперечная.

А вот flex-элементы не привычные блоки уровня блока, а уже блоки уровня flex. Они обладают свойствами которых нет у обычных блочных элементов.

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

Ещё одно важное отличие от обычных блоков: отступы. У flex-элементов они не накладываются (не схлопываются) а стыкуются. А их значение auto выполняет роль заполнителя свободного пространства, подобно свойству flex‑grow....

Попробуйте прямо сейчас в своём макете установить в правиле для подвала margin-topauto.

Множество перечисленных и неперечисленных здесь плюсов позволяет Flex-контейнерам стать активным инструментом в построении макетов страниц.

Например нужно убрать противоречие между визуальным браузером и читателем. Согласно стандарта HTML 5 любой раздел или статья первым элементов должны иметь заголовок с их названием.

Для голосового браузера это нормально: перед началом текста статьи прочттать её название. С визуальным браузером всё наоборот. Не всем удаётся подружить два заголовка расположенных рядом. Часто это выглядит неопрятно.

Но достаточно в правило для img добавить свойство order-1 (единица с минусом), как изображение займёт первое место в группе flex-элементов. Значение 1 (единица без минуса) отправит его в самый конец, а 0 вернёт его на своё место.

Удалось сохранить структуру кода в соответствии стандартам, а для читателя название статьи приблизить к её контенту.

Слева код CSS разметки модуля. Справа модуль оформленный и готовый для помещения на страницу.

На закуску

Много любопытных вещей можно узнать о технологии flaxible, но это уже тем, кто действительно заинтересован в серьёзном, даже профессиональном изучении всевозможного Веб. Остальное ищите в интернете.

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

Ищите в сети шаблоны flexbox желательно с описанием процесса разработки. Копируйте шаблоны особенно код CSS добавляя комментарии к правилам, к незнакомым свойствам. Это поможет углубить знания и расширить поле творческих работ для вашего портфолио.