Java, UX, HTML, CSS, WEB-design

Список для чтения Flexbox: методы и инструменты

Краткое описание по статье Список для чтения Flexbox: методы и инструменты

Название: Список для чтения Flexbox: методы и инструменты . Краткое описание: [ad_1] ⭐ Козима . Дата публикации: 05.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

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

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Козима Мильке

  • 0 Комментарии

Список для чтения Flexbox: методы и инструменты

  • 6 минут чтения

  • Кодирование, CSS, Flexbox

Краткое резюме ↬

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

Flexbox дает нам новый вид контроля над нашими макетами, делая задачи кодирования, которые было трудно или невозможно решить с помощью одного лишь CSS, простыми и интуитивно понятными. Он дает нам средства для создания сетки, которые являются гибкими и осведомлены о динамическом контенте, и, таким образом, дают нам свободу сосредоточиться на процессе создания вместо того, чтобы прокладывать себе путь к макету.

Чтобы дать вам преимущество в работе с Flexbox и дать вам идеи о том, как использовать его для решения распространенных задач кодирования, мы собрали советы, приемы и инструменты которые помогут вам получить максимальную отдачу от его мощности уже сегодня. Список ни в коем случае не является полным, но включает в себя ресурсы, которые мы нашли полезными и полезными.

Дальнейшее чтение на SmashingMag:

  • Разработка макетов с помощью Flexbox
  • Горизонтальное и вертикальное центрирование с помощью CSS и Flexbox
  • Количественные запросы с CSS и Flexbox
  • Модули пользовательского интерфейса (раскрывающиеся списки, липкие нижние колонтитулы и т. д.)
  • Модули Flexbox для веб-приложений

Начиная

Использование Flexbox сегодня

Отличным примером возможностей Flexbox и того, как его использовать, является статья Криса Райта «Использование Flexbox сегодня». Как отмечает Крис, существует явный разрыв между тем, что мы создаем сегодня, и тем, как мы будем работать завтра. Поэтому, чтобы привлечь больше людей к использованию Flexbox сегодня, он обрисовывает в общих чертах стратегию повышения его ценности для ваших проектов и приводит примеры того, как улучшить текущие макеты с помощью Flexbox, в том числе макеты карточек, макеты разделенного экрана, закрепленные макеты, газетные и рекламные блоки, макеты с несколькими столбцами, а также информационные панели.

Еще после прыжка! Продолжить чтение ниже ↓
Flexbox используется на сайте The Guardian
Flexbox в дикой природе на газете и рекламных блоках Guardian. Один из примеров в статье Криса Райта о Flexbox. (Изображение предоставлено Крисом Райтом)

Изучайте Flexbox в увлекательной игровой форме

Честно говоря, несмотря на (или из-за?) его огромного потенциала, Flexbox может быть довольно пугающим, если вы только собираетесь начать. Интересным способом понять его свойства и элементы является Flexbox Froggy, браузерная игра, которая учит вас основам Flexbox, используя его, чтобы направлять маленькую лягушку к ее кувшинке.

Практические советы и рекомендации

Вы освоили основы Flexbox и готовы погрузиться глубже? Следующие ресурсы предоставляют практические решения для распространенных проблем кодирования.

Решено Flexbox

Подумайте обо всех тех вещах, которые хакеры CSS пытались решить в течение многих лет: макет Святого Грааля, плавные входные пары во всю ширину, медиа-объекты, которые обходятся без переполнения, хаки с очисткой или блочным форматированием, нижние колонтитулы, которые остаются внизу даже малосодержательные страницы, вертикальное центрирование — что ж, Flexbox решает все это навсегда и без каких-либо хаков. Филипп Уолтон составил презентацию этих проблем и их решений Flexbox. Здорово держать под рукой для вашего следующего проекта.

Создание точных сеток

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

Flexbox и количественные запросы

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

Гибкая сетка Аарона Густафсона
Гибкая сетка Аарона Густафсона в действии. Посмотреть большую версию.

Обертывание со смещением выравнивания

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

Обертывание со смещением выравнивания
Чаще всего проблемы с выравниванием легко решить с помощью Flexbox. Посмотреть большую версию.

Это ситуация, с которой столкнулся Крис Койер. Его техника переноса со смещением выравнивания решает проблему, предоставляя заголовку гибкий контейнер с display:flex; и само название flex-grow: 1;, поэтому подзаголовок сдвигается вправо. А так как flex-контейнеры можно оборачивать, требуется всего лишь flex-wrap: wrap; чтобы субтитры вели себя так, как задумано на маленьких экранах. Один из тех моментов, когда Flexbox преуспевает в том, чтобы сделать что-то сложное невероятно простым. Также применимо к другим задачам адаптивного дизайна.

Переопределение justify-content

Один из самых сокровенных секретов Flexbox, вероятно, заключается в том, как переопределить justify-content для независимого позиционирования гибкого элемента вдоль главной оси. Решение: автоматическая маржа! Конечно, они не новы в CSS, но в сочетании с Flexbox они раскрывают совершенно новые возможности. При применении к гибкому элементу элемент автоматически расширяет указанное поле, чтобы занять дополнительное пространство во гибком контейнере, в зависимости от направления, в котором применяется автоматическое поле.

Переосмысление шаблонов пользовательского интерфейса с помощью Flexbox

То, что мощь Flexbox выходит за рамки обычных задач по верстке, показывает эксперимент Зелла Лью. Он использовал Flexbox, чтобы переосмыслить шаблон пользовательского интерфейса, который вы найдете повсюду: элемент звездного рейтинга. Его версия Flexbox обходится всего 50 строками кода и пятью звездами в SVG и была воплощена в жизнь с помощью комбинации родственного селектора. ~, flex-flow имущество и row-reverse. Отлично!

Шаблоны Flexbox от CJ Ceizal также показывают способы использования возможностей Flexbox для создания компонентов пользовательского интерфейса. Он предоставляет интерактивные примеры и исходный код, который вам понадобится для начала работы с пошаговым вводом, вкладками, нижними колонтитулами форм, центрированными подсказками, боковыми панелями и многим другим.

Инструменты и дополнительные ресурсы

Вычисление ширины элементов Flex

Если вычисление ширины flex-элементов вызывает у вас головную боль, то Flexbox Tester для вас. Просто введите значения для flex-grow, flex-shrink и flex-basis для трех гибких элементов, чтобы увидеть, как они себя ведут.

Работа с ошибками и обходными путями

Как и любая техника, Flexbox, конечно, не свободен от ошибок. В те моменты, когда вы сталкиваетесь с одним из них, Flexbugs обязательно исправит. Список проблем Flexbox, составленный сообществом, регулярно обновляется, предлагая решения и обходные пути для браузера. Если вы обнаружите ошибку, которой еще нет в списке, вы можете сообщить о ней через GitHub. Говоря об обходных путях браузера: полифилл Flexibility предоставляет исправление для старых версий Internet Explorer, которые не поддерживают Flexbox. Он обнаруживает элементы на странице, подверженные флексии, и соответствующим образом изменяет их стиль в IE 8 и 9.

У вас есть что добавить к списку? Дайте нам знать о ваших любимых ресурсах Flexbox в разделе комментариев ниже.

Сокрушительная редакция
(см)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Список для чтения Flexbox: методы и инструменты

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»