Flex-Cheat — это тридцать строк CSS, представленных в виде шести классов, которые можно смешивать и сопоставлять для создания практически любого макета HTML-элемента с помощью магии flexbox.
В недавнем посте на HackerNews многие комментаторы сетовали на сложность разметки HTML-элементов с помощью CSS. Раньше я находил размещение элементов в HTML с помощью CSS довольно раздражающим и утомительным, пока не появился flexbox
, который значительно упростил жизнь, по крайней мере, когда дело доходит до макетов.
В течение последних нескольких лет я использовал одни и те же шесть пользовательских классов и связанные с ними объявления стилей CSS в качестве помощника по макету для своих приложений. Смешивая и сопоставляя эти классы, я смог создать почти любой макет, который хотел, с минимальными трудностями.
Утилита flex-cheat объявляет следующие стили:
flex-container
: помечает элемент какdisplay:flex
, а все его непосредственные дочерние элементы — как фиксированную ширину, т. е. для flex-grow и flex-shrink установлено значение 0.flex-container.column
:flex-container
+ устанавливаетflex-direction
в столбец.flex-container.inline
:flex-container
, но устанавливает отображение наflex-inline
вместоflex
.flex-container.center
:flex-container
+ центрирует прямые дочерние элементы с помощьюalign-items
.flex-container.column.center
:flex-container.column
+ центрирует прямые дочерние элементы с помощьюjustify-content
.flex-rest
: Добавляется к определенным прямым дочерним элементам, чтобы они могли занимать оставшееся доступное пространство. Когда несколько дочерних элементов помечены какflex-rest
, они поровну делят оставшееся пространство. Компоненты, отмеченныеflex-rest
, будут увеличиваться и уменьшаться по мере необходимости.
CSS-утилита flex-cheat, по сути, моя маленькая волшебная палочка, и взмахнув ею в правильном направлении, я получаю именно тот макет, который мне нужен. Чтобы продемонстрировать свою точку зрения, я покажу несколько разных макетов, созданных с использованием только шести классов flex-cheat.
- Ряд фиксированной ширины:
- Ряд одинаковой ширины:
- Ряд смешанной ширины:
- По центру с фиксированной шириной строки:
- По центру со смешанной шириной строки:
- Столбец фиксированной высоты:
- Колонка равной высоты:
- Столбец смешанной высоты:
- По центру с фиксированной высотой столбца:
- По центру столбца разной высоты:
- Сетка со смешанными строками и столбцами:
Пост на HackerNews побудил меня убрать flex-cheat CSS и открыть его исходный код. Вы можете проверить CSS-утилиту flex-cheat на Github. Примеры использования доступны в каталоге примеров.
Я хотел бы услышать ваше мнение о вещах, которые я написал в этой статье, так что присоединяйтесь к своим комментариям ниже.
Первоначально опубликовано на сайте asleepysamurai.com 29 января 2019 г.