Як створити адаптивну форму з допомогою Flexbox

16

Від автора: у цьому уроці ми створимо адаптивну форму за допомогою flexbox. Цікавий і дивний той факт, що flexbox дозволяє будувати форми без медіа запитів.

Давайте поглянемо на кінцевий результат (велика версія, подивіться, як змінюється макет форми):

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

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

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

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

майже у всіх елементів форми є свої лейбли.

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

  • First Name
  • Last Name
  • Email
  • Phone
  • Message
  • Age

  • Submit

Зверніть увагу: перед списком .flex-inner ми використовуємо тег p, а не label. Ð’ даному конкретному випадку тег label використовувати абсолютно необов’язково. Даний тег необхідно використовувати тільки для асоціації лейбла Ñ– елемента форми. Розмітка чекбоксов:

  • 20-29
  • 30-39

Форма з розміткою і без стилів виглядає так:

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

Стилі форми

Додамо в налаштуваннях демо normalize і autoprefixer:

Як створити адаптивну форму з допомогою Flexbox

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

всі елементи списку .flex-outer;

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

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

.flex-outer li, .flex-inner { display: flex; flex-wrap: wrap; align-items: center; }

Тепер необхідно вказати ширину флекс елементів. Почнемо з флекс елементів списку .flex-outer. Основні вимоги:

ширина лейблів повинна бути в межах 120px – 220px;

ширина елементів форми після лейблів повинна бути не менше 220px.

Що це нам дає? Всі лейбли з прив’язаними до них елементами будуть відображатися на одному рядку при загальній ширині форми від 340px Ñ– вище. Ð’ іншому випадку всі елементи форми вишикуються один над іншим (крім чекбоксов, що ми зараз побачимо). Зверніть увагу: вищезгадані значення вибрані довільно, Ñ—Ñ… можна змінити під свої потреби.

.flex-outer > li > label, .flex-outer li p { flex: 1 0 120px; max-width: 220px; } .flex-outer > li > label + *, .flex-inner { flex: 1 0 220px; }

Кнопка відправки

Нарешті, кнопка відправки є також флекс елементом, їй ми задамо кілька базових стилів:

.flex-outer li button { margin-left: auto; padding: 8px 16px; border: none; background: #333; color: #f2f2f2; text-transform: uppercase; letter-spacing: .09em; border-radius: 2px; }

Чекбокси

Додамо стилів для чекбоксов. Згадаймо, що їх флекс контейнер має мінімальну ширину 220px.

Як створити адаптивну форму з допомогою Flexbox

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

.flex-inner li { width: 100px; }

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

.flex-inner { justify-content: space between; }

Значення відмінно працює і дозволяє досягти точного вирівнювання чекбоксов і їх лейблів. Єдине але – дане значення може неадекватно розставити елементи останнього ряду. На певному дозволі екрану ви побачите щось типу:

Як створити адаптивну форму з допомогою Flexbox

Зверніть увагу на два останніх флекс елемента. Якщо вам з якихось причин не подобається таке розташування, і ви хочете, щоб вони були поруч, можна спробувати:

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

додати фіксовану ширину флекс елементів з допомогою відсотків (тобто width: 50%);

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

Найважливіше – треба зрозуміти дві речі:

flexbox дозволяє швидко створювати красиві форми;

всі вищезгадані значення відмінно працюю в нашому конкретному прикладі. Приміром, лейбли чекбоксов досить невеликі, тому ми поставили для їх батьків фіксовану ширину (100px). Але якщо у них різна ширину, розумніше поставити flex: 1 100px.

Кінцеві стилі

Додамо трохи лиску і зробимо форму більш презентабельною. Відкрийте вкладку CSS в демо нижче, подивіться, в яких місцях ми додали кольору і відступи:

Висновок

Як бачите, з мінімальною розміткою і за допомогою flexbox нам вдалося створити адаптивну форму. Сподіваюся, ви винесли щось корисне для себе, і будете тепер створювати свої форми на flexbox.

Що далі

Якщо ви хочете поліпшити цю форму, вам потрібно:

поліпшити зовнішній вигляд, переписавши стандартні стилі (наприклад, додати своїх чекбоксов);

зробити форму динамічною. Наприклад, якщо ви знайомі з WordPress, перевірте, чи можна створити форму Contact Form 7 або Ninja Form і зберегти структуру і стилі від нашої форми.