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 г.