Хотя Grid и Flex произвели революцию в веб-дизайне с их средствами точного размещения контента с меньшим количеством хаков, это механизмы, которые могут быть сложными для понимания. Если вы чувствуете себя потерянным, попробуйте эти прекрасные руководства и практические приложения-песочницы.
1 Flexbox Froggy
Flexbox Froggy, которому почти десять лет, является одним из самых ранних и самых известных примеров интерактивного обучения CSS. Эта онлайн-игра обучает вас основам Flexbox, также известного как гибкий модуль макета CSS.
Игра работает, представляя набор симпатичных персонажей-лягушек в сетке, к сожалению, отделенных от их кувшинок. Используя редактируемое текстовое поле, ваша задача — заполнить пробелы, используя такие свойства, как justify-content и align-items.
Ваши решения расставят лягушек в соответствующих местах в их пруду, с надеждой выстроив каждую лягушку в ряд с соответствующей ей кувшинкой. Лягушки имеют цветовую маркировку, чтобы соответствовать определенным кувшинкам, поэтому вам нужно будет менять их местами по мере увеличения сложности.
Игра не воспринимает себя слишком серьезно, поэтому вы можете выбрать любой понравившийся вам уровень в любое время. Каждый уровень имеет четко представленную задачу, и игра отображает полезные подсказки, когда вы нажимаете на определенное имя свойства CSS. Есть даже режим для дальтоников, который добавляет узоры, чтобы различать каждую лягушку.
Серия завершается одним большим испытанием ваших общих знаний, которое представляет собой весьма увлекательное испытание.
После того, как вы освоите Flexbox, вы можете перейти к CSS Grid с продолжением, Grid Garden. Это продолжение обучает основам двухмерной компоновки, используя тот же подход, на этот раз поручая вам поливать сад и очищать его от сорняков.
2 Изучите CSS-сетку
Говоря о CSS-сетке, вот исчерпывающее руководство по этой более продвинутой технике макета. Learn CSS Grid — это автономное одностраничное руководство, которое одинаково хорошо работает как визуальный справочник и как учебник для начинающих.
Работая от первых принципов до продвинутых методов, это руководство проведет вас через сложности CSS-сетки по одному свойству за раз. Оно не интерактивное, но прекрасные примеры более чем компенсируют это, демонстрируя, как именно каждое свойство и значение вносят вклад в общую компоновку. Сопроводительные диаграммы просты, но они эффективно иллюстрируют каждый пункт.
Хотя последующие примеры более практичны, здесь основное внимание уделяется четкому объяснению каждого свойства, его особенностей и поведения в сочетании с другими.
Результатом является гораздо более доступный компаньон для официальных спецификаций, которые могут показаться немного пугающими, если вы новичок в CSS. Но если вы добавляете сетку в свой репертуар CSS или следуете одному из более практических ресурсов здесь, это идеальный справочник, который можно добавить в закладки.
3 Сетка по примеру
Этот сайт обещает «все, что вам нужно для изучения CSS Grid Layout» и предоставляет, с примерами конкретных свойств, образцы более высокого уровня общих шаблонов проектирования и даже видеоуроки. Созданный Рейчел Эндрю, членом рабочей группы W3 CSS, Grid by Example содержит понятные демонстрации, начиная от стилей небольших компонентов и заканчивая макетами целых страниц.
Основные примеры включают встроенные Codepens, которые вы можете исследовать и экспериментировать с ними, чтобы укрепить свое понимание. Они также связаны с соответствующей частью официальной спецификации, так что вы можете погрузиться глубже, если необходимо.
Альтернативные подходы означают, что есть простой способ для вас учиться, независимо от ваших предпочтений. Независимо от того, учитесь ли вы, глубоко разбираясь в каждой последней детали или углубляясь в высокоуровневую концепцию, вы обнаружите, что Grid by Example охватывает вас. На сайте есть множество дополнительных материалов, помимо основных руководств, со ссылками на проекты Рейчел GitHub, которые отслеживают ошибки CSS и отвечают на часто задаваемые вопросы.
4 Интерактивное руководство по Flexbox
Это руководство высоко оценивается своими интерактивными примерами, которые включают вкладки и ползунки, которые вы можете использовать для настройки свойств. По мере того, как вы настраиваете эти виджеты, сопутствующий CSS подстраивается под них, и вы увидите эффект в реальном времени на образце компонента. Это делает обучение мгновенным и точной демонстрацией того, что на самом деле происходит в вашем браузере.
В интерактивном руководстве по Flexbox приводятся превосходные диаграммы, помогающие устранить любую путаницу, а для объяснения топоров — концепции, которую часто понимают неправильно, — используется забавная метафора с барбекю.
Эта одностраничная статья завершается превосходным практическим исследованием распространенной задачи: макетирование формы входа. Она использует Flexbox для предоставления четырех различных макетов в зависимости от доступного пространства, без использования медиазапросов вообще. Метод представлен тремя способами: интерактивный пример, codepen и пояснительное видео.
Автор, как и ожидалось, продолжил это руководство, выпустив «Интерактивное руководство по CSS Grid», которое столь же хорошо объясняет двухмерную компоновку.
5. Руководство по макету сетки CSS
Рано или поздно вы обязательно столкнетесь с CSS Grid Layout Guide Криса Хауса и его партнером CSS Flexbox Layout Guide на CSS-Tricks. На этом сайте есть много полезных статей и руководств, но эта пара представляет собой лучшее, что он может предложить, и они, вероятно, являются наиболее цитируемым доступным ресурсом CSS. Почти каждый раз, когда у меня возникает вопрос о сетке или Flexbox, я, похоже, попадаю сюда.
Эти два руководства практически являются стандартом для изучения CSS Grid и Flexbox. Они дают отличные справочные материалы с простыми диаграммами и понятными объяснениями свойств, сгруппированных в соответствии с их назначением. Они не обязательно предназначены для абсолютных новичков, но хорошо подходят для тех, кто переходит с макетов на основе float или более старых альтернатив.
Каждое руководство представляет свойства в двух столбцах, один для тех, которые применяются к родительским контейнерам, а другой для дочерних. Это практический способ подхода к материалу, который помогает укрепить ваше понимание того, как эти различные механизмы подходят к проблеме размещения контента.
Хотя оба ресурса имеют много разделов, включая заметки о терминологии, поддержке браузеров и ошибках, именно разделы свойств наиболее полезны. Сайт фактически расширяет эти разделы по умолчанию, оставляя другие сжатыми, что подчеркивает, насколько они являются основным фокусом.
6 Что за Flexbox?!
What The Flexbox?! — это старый видеокурс, который остается актуальным и сегодня. Представленный Уэсом Босом, опытным веб-разработчиком и преподавателем, этот набор видео охватывает все: от направления flex до востребованной компоновки «столбцов одинаковой высоты».
Уэс — увлекательный ведущий, который объясняет каждую часть примеров кода по ходу дела, и серия хорошо подходит для новичков и тех, кто знаком с основами CSS. Если вам нравится учиться у опытного голоса, в темпе, который поможет вам легко следовать, эта серия уроков идеально вам подойдет. Большинство видео длятся 5–10 минут, поэтому они не слишком увязают в деталях, охватывая каждую тему точно, но лаконично.
Хотя видео размещены бесплатно на сайте Уэса, для полного доступа к которому требуется ваш адрес электронной почты, вы также можете посмотреть их на его канале YouTube. Как и многие ресурсы здесь, есть также соответствующее руководство по сетке.
