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

18

Від автора: у цьому уроці ми створимо адаптивну форму за допомогою 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 і зберегти структуру і стилі від нашої форми.