Технология Flexible

Гибкие блоки

Flexible или коротко flex — современный способ размещения блоков на странице со свойством CSS displayflex.

Блоки в потоке располагаются один под другим и никак иначе. Чтобы поместить их рядом по горизонтали традиционно использовалось свойство float со значениями left и right или position со значением absolute.

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

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

Flex-контейнер, кроме основных свойств имеет ряд других, которые управляют его flex-элементами. Посмотрите на очередной Площадке Полигона, как это происходит.

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

При необходимости можно менять ширину правого блока (условное окно браузера), перемещая маркер в его правом нижнем углу. В браузере Internet Explorer или Edge изменять размеры придётся у окна самого́ браузера.

Flex_контейнер на Площадке залит золотым фоном, а пронумерованные 4 flex-элемента — разноцветные. Сама Площадка построена с использованием Flexible, так что не удивляйтесь, если она будет вести себя непривычно. Это такой же эксперимент, как и пример внутри неё.

Полигон. Площадка 3 display: flex;

Текст перед элементом "Flex_box" не в [P].
1
2
3
4
Текст после элемента "Flex_box" и тоже не в [P].
Если «Площадка» работает неправильно, сообщите руководителю.

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

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

Что же умеет flex. На этой площадке для начала рассмотрим только два свойства.

  1. Доступные значения свойства display можно прочесть в подсказке со знаком вопроса.
    • Первое из них displayflex. Золотой блок, оставаясь блочным, стал flex-контейнером, а его дочерние — flex-элементами. По умолчанию они с интересными особенностями собрались в одну строку. Высота всех выровнялась по самому высокому красному блоку. И ширина изменилась пропорционально, чтобы смогли уместиться рядом.
    • Второе — displayinline-flex. Снаружи flex-контейнер начинает вести себя как строчный элемент и встраивается в строку между словами, как символ особого рода. А его дочерние, как и раньше, остаются flex-элементами.

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

  2. Ещё одно свойство — flex-direction. По умолчанию элементы расположены в потоке: блочные в вертикальном, а строчные в горизонтальном. Flexible можно представить в виде трубы, по которой поток течёт.
    • Труба может располагаться горизонтально flex-directionrow. Это значение по умолчанию. Элементы выстраиваются в ряд, подобно float.
    • Но стоит к значению свойства добавить flex-directionrow-reverse элементы останутся в строке, но расположатся в обратной последовательности — справа налево.
    • Трубу можно развернуть по вертикали flex-directioncolumn. Элементы окажутся в привычном потоке сверху вниз.
    • Так же, как и в строке, поток в вертикальной трубе можно направить в обратную сторону flex-directioncolumn-reverse. Элементы останутся как в обычном потоке но расположатся снизу вверх.

Всё настолько необычно, что неплохо бы это запомнить.

Индивидуальный конспект

Подготовка

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

Самый лучший конспект тот, который написан после урока.

На вашем диске уже имеется папка clipart для записи интересных фрагментов кода с комментариями к ним. Если ещё нет, то создайте её.

В clipart создайте раздел — ещё одну папку flexible, а в ней папку css. В обе папки скопируйте подготовленные шаблоны. В одну sample.htm, в другую sample.css.

Для каждого эксперимента с отдельным свойством стоит создавать новую пару файлов. Их будет копиться много, и чтобы не запутаться, каждой паре давайте одинаковое название: имя изучаемого свойства. В данном случае: direction.htm и direction.css. А если для конспекта понадобится изображение и не одно, то и им нужно давать такие же имена, добавляя каждому порядковый номер: direction_01.pngdirection_11.png и т. д.

Создание

Скопируйте в подготовленные файлы код HTML (он представлен ниже) и CSS из левого блока Площадки. В кодах придётся добавить структурные отступы, немного подредактировать и дописать оформление на свой вкус.

····SECTION class=flex_boxАнонс/SECTION
······ARTICLE class=flex_boxСтатья 1/ARTICLE
······ARTICLE class=flex_boxСтатья 2/ARTICLE
······ARTICLE class=flex_boxСтатья 3/ARTICLE
······ARTICLE class=flex_boxСтатья 4/ARTICLE
····/SECTION
Образец кода HTML текущей Площадки.

И самое главное:

  • Напишите осмысленное название в элементе TITLE и в заголовке страницы.
  • Если пример получен из интернета, то в подзаголовке обязательно оформите ссылку на оригинал. С ней всегда можно будет вернуться к нему и перечитать статью целиком, если что-то оказалось упущенным.
  • Перед или после примера добавьте абзац с описанием свойства: какой особенностью элемента оно управляет.
  • И ещё ряд абзацев или список с перечнем и описанием значений свойства.

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

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

Подобные конспекты стоит писать и по другим изучаемым предметам.

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

А по завершении учебного года в папке можно создать файл index.htm, в котором собрать все ссылки на страницы отдельной папки. Получится настоящий сайт-конспект по отдельному предмету.

Образец конспекта

Пример конспекта

Взгляните на эту тему и сравните её с конспектом. Конспект похож на справочник или шпаргалку. Их можно писать по любой теме и к любому предмету. Главная ценность — в маленьком объёме достаточно много информации.

Если предстоит подготовка к экзамену по какому-либо предмету или контрольной… Сколько времени понадобится вам, чтобы подготовиться по всем записанным конспектам?

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

Конспекты-шпаргалки стоит создавать в течение учебного года. Это сэкономит массу времени при подготовке к экзаменам — не придётся перечитывать толстые учебники.

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

Практика

План

В плане куратора построить сайт, например, с описанием инструментов веб-разработки. Начать с титульной страницы. Она должна быть самая «распрекрасная», чтобы привлечь читателей. И для неё нужен модуль с анонсами, созданный с использованием технологии Flexible.

Главный модуль MAIN будет содержать особого рода меню под названием анонс со ссылками на полные версии статей. Такой приём используется на объёмных сайтах.

Посетитель на странице читает самые интересные цитаты из последних опубликованных статей. Он уже знает о чём они и имеет выбор — какую прочесть сразу, а какую позже.

Советую и вам принять участие в этом увлекательном деле по разработке модуля. Тем боле, что никто не требует дословно копировать контент. Для своих работ можете материал собирать самостоятельно.

Код HTML

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

На удачу нужный нам код HTML уже готов. Как правило, разобраться в чужом коде бывает очень трудно. Иногда проще написать свой, чем пытаться понять, что в нём описано.

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

····DIVid=module_main
······H5Заголовок модуля/H5
······DIVclass=necessary
········SECTIONclass=tool
··········H6Заголовок анонса/H6
··········IMGsrc=img/bung.pngalt=...title=...
··········PБольшой анонс в 2-3 абзаца./P
··········PС текстом из Яндекс.Рефераты./P
··········FOOTER
Ahref=https://yandex.ru/referats/Яндекс.Рефераты/A
··········/FOOTER
········/SECTION
········SECTIONclass=tool
··········H6Заголовок анонса/H6
··········IMGsrc=img/bung.pngalt=...title=...
··········PНебольшой анонс в 1-2 коротких абзаца./P
··········PС текстом из Яндекс.Рефераты./P
··········FOOTER
Ahref=https://yandex.ru/referats/Яндекс.Рефераты/A
··········/FOOTER
········/SECTION
······/DIV
····/DIV

Обсудите с руководителем.

  1. Сколько «дочерних» элементов находится в элементе DIV класса classmodule_main.
  2. Какие элементы «родители» элементов IMG.
  3. Сколько потомков у DIV класса classnecessary.
  4. Сколько блоков будет выведено на страницу в этом модуле. В каких элементах хранятся эти блоки.
  5. Нарисуйте прямоугольниками эскиз этого модуля и напишите роли каждого блока.

Если всё получится удачно, то можно переходить к обсуждению свойств CSS. Но это в продолжении статьи. А пока:

  • подготовьте папку для работы и назовите её module_main_1 (главный модуль страницы, версия 1);
  • скопируйте код в файл module_main.htm;
  • приведите структуру кода в порядок;
  • подключите к нему файл module_main.css из папки css;
  • в папке img создайте файл-затычку bung.png размером 100×100 пикселей.

Создание селекторов CSS

С кодом HTML разобраться было нетрудно, он добавлен в документ module_main.htm и отредактирован. В браузере пока ничего не понятно, так как у размеченных блоков отображается только текст с настройками по умолчанию. Пора приступать к созданию кода CSS в заготовленном файле.

Файл module_main.css, созданный по шаблону уже содержит, как минимум четыре правила. Если шаблон вы не использовали, то вспомните эти правила для всех новых документов.

Первый блок правил CSS «Обязательные».

  1. Правило для [BODY]. В нём обязательно должны быть свойства, которые разработчик задаёт по умолчанию для всех элементов страницы. Это правило должно быть в самом начале файла и тогда в других не придётся заботиться об этих свойствах или переназначать их только конкретным элементам.
    • Фоновая заливка страницы. Выбор цвета — ваша фантазия, но традиционно это белый.
    • Название семейства шрифтов или имя конкретного для всех элементов документа.
    • Размер шрифта документа. Его размер будет равен 1em для всех элементов страницы, если далее не будет переназначен каким-нибудь блокам.
    • Цвет символов документа. Выбирается из цветовой гаммы, подобранной к странице, традиционно — чёрный.
  2. Правило для ссылок в тексте на странице. Описание их особого внешнего вида, в частности цвета символов. Их цвет традиционно синий.
  3. Правило для просмотренных ссылок. Читатель должен видеть, где он уже побывал и куда ещё стоит заглянуть. Чтобы задать селектор этому правилу, к имени элемента нужно добавить псевдокласс «посещённая ссылка». Визит на страницу по ссылке уже свершён. Цвет символов традиционно пурпурный.

    По-английски слово «визит» созвучно с русским: visit. Найти похожее можно в справочнике на странице Псевдоклассы.

  4. Правило для ссылок с наведённой на них мышкой. Отозвавшаяся ссылка. Для её правила тоже понадобится селектор псевдокласса «курсор мыши наведён поверх ссылки». Своим видом ссылка должна сообщить пользователю, что она готова для перехода. Цвет символов традиционно красный.

    Снова вернёмся к английскому языку. «Ссылка» — Hyper reference (отсюда и атрибут href элемента A), а «сверху» — over. Теперь найти подсказку в том же справочнике не так трудно.

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

Первый блок правил сформирован. Теперь нужно перейти ко второму. Его правила помогают увидеть все блоки на странице. Они должны выглядеть так как задумал дизайнер. А будут выглядеть так, как удалось построить структуру кода HTML.

Второй блок правил «Расцветка блоков модуля».

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

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

Самая важная роль правил расцветки в том, что селекторы в них должны быть сформированы для каждого блока в модуле. И далее, в процессе оформления страницы, созданные селекторы, можно будет использовать в правилах для любого элемента в любом блоке.

Добавляйте фон элементам пошагово. Сначала назначьте фон одному элементу, посмотрите как это выглядит на странице, затем следующему и снова оцените… И так до самого последнего. Это поможет убедиться в правильном выборе селекторов.

Оболочка модуля в элементе div имеет идентификатор id=module_main. Селектор правила только для неё будет простым: селектор идентификатора #module_main. В правило осталось записать свойство фона и в его значении указать цвет.

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

Селектор этого правила тоже должен быть уникальным. Но использование множества идентификаторов на странице, не лучший способ. Создадим комбинированный селектор. Из нескольких селекторов составим один.

  1. Заголовок расположен в оболочке модуля. Поэтому селектор начнётся с его идентификатора: #module_main.
  2. Заголовок — дочерний элемент оболочки модуля и первый среди всех её детей. Первый ребёнок по-английски соответственно first и child. Вместо назначения класса поищем в справочнике подходящий псевдокласс без обозначения типа элемента.
  3. Неудача. Сравните покрашенные блоки и положение из элементов в структуре кода HTML. Браузер стал искать все первые элементы на всю глубину кода у каждого потомка. Нам нужно, чтобы он обращал внимание только на своих «детей», а «внуков» и «правнуков» оставил в покое. Помощь можно найти среди контекстных селекторов в разделе Селекторов и их комбинаций. Подсказки здесь нет. Этих селекторов не так много и они важны при построении правил. Стоит познакомиться с каждым.

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

Оболочка для анонсов статей. Следующий элемент DIV class=necessary. Случайным образом разработчик другого модуля тоже может выбрать слово necessary для обозначения класса элементам в своём модуле.

Этому правилу должны подчиняться только те элементы с классом .necessary, которые находятся в модуле #module_main. Здесь снова поможет один из контекстных селекторов. При выборе будьте внимательны.

Разделы с анонсом статей .tool тоже являются потомками оболочки модуля. Поэтому селектор правила для них будет подобным предыдущему.

Заголовки анонсов статей. Добрались и до них. Если вы внимательно читали справочник и успешно составили предыдущие селекторы, то сумеете и с этим разобраться самостоятельно. Ведь так же неизвестно какого уровня заголовки будут использованы. А если возникнут трудности, внимательно перечитайте этот подраздел.

Изображения к анонсам статей. Точно так же можно сформировать и правило для изображений. У элементов img есть родитель (раздел) и предок (оболочка модуля). Для уточнения, что правило относится не к любым картинкам и фотографиям на странице, в селекторе достаточно указать либо «предка».

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

Уже дважды рассматрен заголовок, неважно какого уровня. Подобная ситуация и здесь — вспомним английский и поищем псевдокласс о последнем элементе на знакомой странице. Селектор должен получиться как и для заголовков.

Все необходимые для макета правила созданы. Обратите внимание. В модуле 15 блоков. Но для построения правила к каждому из них использованы всего один идентификатор и два класса.

Подобные селекторы позволяют менять в коде HTML одни элементы на другие. Например, div заменить на section, section на article, и ничто не изменится в дизайне макета. Селектор типа элемента использован только для img, так как его ни на какой другой элемент не заменить.

Для сообразительных

Вопрос. Почему нет правила для абзацев?

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

Для ленивых или сооборазительных,
но неуверенных в себе:

===== ПРОМЕЖУТОЧНАЯ РАСЦВЕТКА БЛОКОВ МАКЕТА =====
module_main оболочка модуля
module_main > first-child первый элемент только в самом модуле
module_main necessary оболочка всех анонсов
module_main tool контент отдельного анонса
module_main tool > first-child первый элемент только в самом анонсе
module_main img изображения в анонсе
module_main tool > last-child последний элемент только в самом анонсе

===== РАЗМЕТКА МАКЕТА =====

Третий блок правил «Макет»

Ожидайте в отдельном документе.