Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Flexbox
Webdesign

Как создать адаптивную форму с помощью Flexbox

by
Difficulty:BeginnerLength:ShortLanguages:

Russian (Pусский) translation by Sergey Zhuk (you can also view the original English article)

В этом уроке мы узнаем, как использовать flexbox для создания гибкой формы. Что интересно (и одновременно захватывающе), так это то, что flexbox позволяет нам создавать нашу форму без использования каких-либо медиа-запросов.

Прежде чем мы начнем, давайте посмотрим, к чему мы будем стремиться (выверните более крупную версию, чтобы увидеть, как изменяется макет формы):

Структура формы

В таком случае сначала, во-первых, давайте рассмотрим структуру формы. Мы разметим ее следующим образом:

  • Будем использовать .flex-outer Неупорядоченный список для группировки различных элементов формы
  • и .flex-inner Неупорядоченный список, чтобы сгруппировать флажки.
  • Почти все элементы управления формы поставляются вместе с соответствующей меткой.

Это все! Определив только два неупорядоченных списка (мы могли бы также использовать упорядоченные списки), мы построили очень чистую форму. Вот так она выглядит:

Примечание: мы используем элемент p вместо элемента label перед .flex-inner списком. Это связано с тем, что в этом конкретном случае нет смысла использовать тег label. Этот тег должен использоваться только для того, чтобы связать текстовую метку с элементом управления формы.

Вот разметка для флажков:

С готовой разметкой нестилизованная форма выглядит так:

Это будет самая причудливая форма, которую вы когда-либо видели, но она работает! Это семантическое, доступное и текучее; Аспекты, которые, возможно, важнее всего.

На этом мы готовы приступить к применению некоторых стилей.

Стили формы

Давайте начнем с добавления нормализации и автопрефиксации к нашим настройкам:

Далее мы определим гибкие контейнеры. В нашем случае следующие элементы:

  • Каждый из элементов .flex-outer списка.
  • Внутренний список .flex, содержит все флажки.

Кроме того, мы хотим вертикально центрировать элементы flex по поперечной оси.

Чтобы добиться такого поведения, мы создали несколько исходных правил CSS:

Следующий шаг - указать ширину элементов flex. Начнем с элементов flex .flex-outer списка.

Основные требования:

  • Ширина меток должна быть не менее 120 пикселей и не более 220 пикселей.
  • Ширина элементов формы, которые появляются после меток, должна быть не менее 220 пикселей.

Что это нам дает? Каждая метка вместе с ассоциированным её элементом формы будет отображаться в одной горизонтальной строке, если ширина формы составляет не менее 340 пикселей. В любом другом случае все элементы формы (кроме флажков, которые мы увидим позже) будут располагаться вертикально.

Примечание. Вышеуказанные значения произвольны - вы можете изменять их в соответствии с вашими потребностями.

Кнопка отправки

Наконец, для кнопки submit, которая также является элементом flex, мы определяем несколько основных стилей:

Флажки

Давайте теперь создадим флажки. Помните, что их гибкая обертка имеет минимальную ширину 220px.

Во-первых, мы устанавливаем ширину элементов flex, которые являются непосредственными родителями флажков, до 100 пикселей:

Затем мы используем свойство justify-content для выравнивания по главной оси. Обратите внимание, что это свойство имеет разные значения, но для этого примера нас интересует только значение space-between:

Это значение хорошо работает и позволяет нам последовательно выравнивать флажки и их соответствующие ярлыки. Следует отметить, что это значение свойства может неравномерно распределять элементы последней строки. На некоторых экранах вы увидите примерно следующее:

Обратите внимание на выравнивание двух последних элементов flex. Если по какой-то причине вам не нравится этот макет, и вы предпочитаете, чтобы они появлялись рядом друг с другом, вы можете попробовать что-то вроде этого:

  • Удалите свойство justify-content из flex-обертки.
  • Используйте проценты для добавления фиксированной ширины к элементам flex (например, ширина: 50%).
  • Используйте медиа-запросы, чтобы переопределить эту ширину. Например, когда ширина окна просмотра больше 992 пикселей, задайте ширину гибких элементов: width: 25% вместо ширины: width: 50%.

Прежде всего, важно понимать две вещи:

  • Flexbox дает нам большую гибкость для быстрого создания красивых форм
  • и все вышеупомянутые значения хорошо работают для этого конкретного примера. Для ваших собственных проектов вам, вероятно, понадобятся другие значения. Например, здесь метки флажков являются довольно маленькими, и по этой причине мы предоставляем их родительскому элементу фиксированную ширину (то есть 100 пикселей). Однако, если они имеют разную ширину, это может быть умнее, чтобы задать им flex: 1 100 px.

Финальные стили

Прежде чем мы закончим, добавим еще немного эстетики, чтобы сделать форму более презентабельной. Разделите вкладку CSS в демонстрационном примере ниже, чтобы увидеть, где были добавлены цвета и интервал:

Заключение

Как вы можете видеть, с минимальной разметкой и использованием flexbox, нам удалось создать адаптивную форму. Надеюсь, теперь вы приобрели полезные знания, которые помогут вам создать свои собственные формы flexbox.

Следующие шаги

Если вы хотите сделать эту форму еще лучше, то у меня есть два задания для вас:

  • Измените внешний вид, переопределив стили по умолчанию (например, добавьте пользовательские флажки)
  • И сделать ее динамичной. Например, если вы знакомы с WordPress, посмотрите, возможно ли создать Contact Form 7 или  Ninja Form,  которая сохраняет структуру и стили этой формы.
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.