Выравнивание в CSS всегда было кошмаром (да, мне нравится драма). Тогда появился Flexbox и с ним возможность выравнивать элементы таким образом, который имеет смысл! В этой статье я собираюсь поделиться набором служебных классов CSS на основе Flexbox, которые могут быть использованы для выравнивания вещей в кратчайшие сроки!
Я изначально создал эти классы для нашей (предстоящей) библиотеки веб-компонентов ,
Для тех из вас, кто предпочитает полностью пропустить статью и посмотреть окончательный файл CSS , вы можете проверить это здесь.
Вот видео-учебник по той же теме:
Перед Flexbox
Перед Flexbox нам пришлось полагайтесь на трюки CSS, чтобы согласовать вещи. Давайте посмотрим на некоторые примеры.
Пример 1) Если вы имели дело с текстом, вы могли бы полагаться на свойства выравнивания текста и высоты строки, задавая высоту строки .child, равную line-height .parent:
Этот метод работает до тех пор, пока текст не обертывается. Реальная задача заключалась в рассмотрении параграфов! Вы были вынуждены задать размер элемента .child, который приводит нас к следующему примеру.
Пример 2) Если вы пытались выровнять элемент с известной шириной (но неизвестной высотой) на x (19459003)
Если вы пытались выровнять один и тот же элемент на обеих осях, вы могли бы использовать трюк, основанный на абсолютном позиционировании и функция translate ().
. Одна из проблем, которые я испытывал с помощью описанной выше техники, — это некоторая размытость на устройствах с более низким разрешением экрана. Это происходит, если функция переводит элемент на значение, которое не является целым числом (например, если высота элемента является нечетным значением). Вы не увидите эту проблему, если вы находитесь на экране сетчатки.
Пример 3) Выравнивание элементов с известным размером было лучшим! Вы все равно должны были установить абсолютное положение для .child, а затем использовать функцию calc () для выравнивания по горизонтали и по вертикали.
Flexbox на помощь!
Изменения Flexbox все (не больше трюков! ?). Чтобы выровнять объекты с помощью Flexbox, вы можете настроить таргетинг на .parent или .child. Например, чтобы центрировать что-нибудь (как по оси x, так и по оси y), вы можете просто применить свойство justify-content и свойство align-items:
Свойство justify-content используется для выравнивания содержимого вдоль главной оси (ось x, если вы не изменили свойство гибкого направления). Свойство align-items для выравнивания элементов вдоль поперечной оси.
Возвращаясь к исходной цели статьи, я пытался создать набор классов утилит, которые можно использовать для выравнивания любого элемента внутри его родитель. Как я уже упоминал ранее, чтобы выровнять объекты в Flexbox, вы можете настроить таргетинг на элемент .child. Самое замечательное в том, что если вы установите марж, равный «авто» элементу flex, он автоматически самовыравнивается.
Например, чтобы выровнять элемент в центре, вы можете использовать следующий фрагмент :
Обратите внимание, что в этом случае требуется выравнивание, чтобы исправить проблему в IE.
Отсюда идея создания _alignment.scss global:
. Классы .align-center, .align-left и .align-right автоматически выравнивают элементы по оси y; затем вы можете выбрать один из трех классов для выравнивания элемента flex по горизонтали.
Другие классы позволяют более точно определить, где вы хотите выровнять свои позиции по обеим осям. Замечательная вещь об этом методе заключается в том, что вы не ограничены одним элементом .child. Вы можете увидеть этот фрагмент в действии в этом ручке:
Надеюсь, вам понравилась статья! Для получения большего количества веб-дизайнов, следуйте за нами здесь, на Среднем или Twitter. ?
Загрузка...
