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

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

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

Давайте взглянем на конечный результат (большая версия, посмотрите, как меняется макет формы):

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

Сперва, давайте разберем структуру формы. Мы сделаем:

для группировки различных элементов формы мы используем неупорядоченный список .flex-outer;

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

для группировки чекбоксов возьмем неупорядоченный список .flex-inner;

почти у всех элементов формы есть свои лейблы.

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

Обратите внимание: перед списком .flex-inner мы используем тег p, а не label. В данном конкретном случае тег label использовать абсолютно необязательно. Данный тег необходимо использовать только для ассоциации лейбла и элемента формы. Разметка чекбоксов:

Форма с разметкой и без стилей выглядит так:

Не самая красивая форма, которую вы видели, но она работает! Форма семантическая, доступная и гибкая – возможно, самые важные аспекты. Теперь можно писать стили.

Стили формы

Добавим в настройках демо normalize и autoprefixer:

Теперь создадим флекс контейнер. В нашем случае это будут:

все элементы списка .flex-outer;

элементы списка .flex-inner с чекбоксами.

Нам нужно вертикально выровнять все флекс элементы вдоль оси. Для этого необходимо задать пару CSS стилей:

Теперь необходимо указать ширину флекс элементов. Начнем с флекс элементов списка .flex-outer. Основные требования:

ширина лейблов должна быть в рамках 120px – 220px;

ширина элементов формы после лейблов должна быть не менее 220px.

Что это нам дает? Все лейблы с привязанными к ним элементами будут отображаться на одной строке при общей ширине формы от 340px и выше. В другом случае все элементы формы выстроятся один над другим (кроме чекбоксов, что мы сейчас увидим). Обратите внимание: вышеупомянутые значения выбраны произвольно, их можно изменить под свои нужды.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Наконец, кнопка отправки является также флекс элементом, ей мы зададим пару базовых стилей:

Чекбоксы

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

Сперва, зададим ширину 100px для прямых родителей чекбоксов:

Теперь при помощи свойства justify-content выровняем их вдоль главной оси. У данного свойства несколько значений, нам нужно только space-between:

Значение отлично работает и позволяет достичь точного выравнивания чекбоксов и их лейблов. Единственное но – данное значение может неадекватно расставить элементы последнего ряда. На определенном разрешении экрана вы увидите что-то типа:

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

удалить свойство justify-content у флекс контейнера;

добавить фиксированную ширину флекс элементов с помощью процентов (т.е. width: 50%);

переписать ширину с помощью медиа запросов. К примеру, когда ширина экрана больше 992px, задавать элементам свойство width: 25%, а не width: 50%.

Самое важное – нужно понять две вещи:

flexbox позволяет быстро создавать красивые формы;

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

Конечные стили

Добавим немного лоска и сделаем форму более презентабельной. Откройте вкладку CSS в демо ниже, посмотрите, в каких местах мы добавили цвета и отступы:

Заключение

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

Что дальше

Если вы хотите улучшить данную форму, вам нужно:

улучшить внешний вид, переписав стандартные стили (например, добавить своих чекбоксов);

сделать форму динамичной. К примеру, если вы знакомы с WordPress, проверьте, можно ли создать форму Contact Form 7 или Ninja Form и сохранить структуру и стили от нашей формы.

Автор: George Martsoukos

Источник: http://webdesign.tutsplus.com/

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

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

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree