3 профессиональных совета по Flexbox.

Источник: 3 pro tips for using flexbox.
Автор:  Jim McCauley.
Перевод: .

Известный веб-дизайнер и автор многих технических статей Зои Гилленвотер (Zoe Gillenwater), которая специализируется на вопросах визуального дизайна, доступности и пользовательского интерфейса , делиться с вами опытом применения Flexbox. И хотя сеть просто кишит публикациями на эту тему, отличительной чертой этой статьи является ее краткость и содержательность одновременно.

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

1. Использование flex-basis.

Значение, присваиваемое свойству flex-basis, можно представлять как опорную величину ширины или высоты. Так, если для свойств flex-grow или flex-shrink заданы ненулевые значения, то это говорит о том, что при необходимости заполнения свободного пространства, размер подлежащих форматированию боксов может быть соответственно больше или меньше значения flex-basis.

Когда, к примеру, у вас активировано свойство flex-wrap, то значение flex-basis можно рассматривать в качестве минимальной ширины (или высоты при вертикальной ориентации), поскольку если элементы могут подвергаться переносу на новую строку при недостатке свободного пространства, они ни в коем случае не должны сужаться до размеров меньших, чем значение flex-basis.

Если свойство flex-shrink активно, а flex-grow нет, то значение базиса можно рассматривать как максимально допустимую ширину. Другими словами, вы таким образом сообщаете браузеру, что соответствующие элементы не должны превышать величину flex-basis при необходимости их форматирования в гибкой компоновке.

2. Вопросы обратной совместимости.

Одной из замечательных особенностей Flexbox является то, что большинство других CSS шаблонов автоматически переопределяются этим функционалом в поддерживающих его браузерах. Таким образом, с целью достижения обратной совместимости вашей Flexbox компоновки вы можете использовать любые CSS приемы, с помощью которых вы зачастую создаете шаблон (включая float, inline-block или table-cell), а в качестве средства улучшения рационального заполнения пространства использовать Flexbox, разместив его код вверху.

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

3. Flexbox и сеточные системы — это разные вещи.

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *