Flexbox и отступы: примеры работы

Flexbox и отступы: примеры работы

От автора: это очень короткий вопрос об использовании отступов в контексте Flexbox форматирования, который мы обсудили с моим другом Вей. Но я думаю, что это довольно распространенная проблема, с которой люди могут столкнуться, так что вот общий обзор.

Сценарий

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

Flexbox и отступы: примеры работы

Это связано с тем, что доступное пространство, выделяемое для Flex-элементов браузером при таких обстоятельствах: ширина блока, содержащего Flex-контейнер, минус его поля, границы и отступы в горизонтальном направлении. Это описано разделе спецификации CSS Flexible Box Layout Module. Уровень 1: 9.2 Размер линии.

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

Использование обводки

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

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

Flexbox и отступы: примеры работы

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

Я хотел бы воспользоваться этой возможностью, чтобы поговорить о спецификации CSS Scrollbars Module Level 1, которая в настоящее время является черновиком. Она вводит 2 новых свойства CSS для стиля полосы прокрутки scrollbar-color и scrollbar-width. Firefox поддерживает их с версии 64.

Flexbox и отступы: примеры работы

Использование псевдо-элемента ::after

Другим вариантом является использование в Flex-контейнере псевдо-элемента ::after. ::before и ::after — это генерированный контент, и вставляются только в связанный элемент. Другими словами, он будет отображаться как дочерний элемент внутри flex-контейнера.

Вы должны убедиться, что отступ для псевдо-элемента ::after составляет половину от отступа, используемого в контейнере, потому что отступ применяется ко всему псевдо-элементу. Но если вы введете padding-left или padding-right, то можете использовать то же значение, что и для отступа во flex-контейнере.

Flexbox и отступы: примеры работы

Завершение

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

Автор: Chen Hui Jing

Источник: https://www.chenhuijing.com

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

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

Комментарии Вконтакте:

Комментарии Facebook:

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