Від автора: у цьому уроці ми створимо адаптивну форму за допомогою flexbox. Цікавий і дивний той факт, що flexbox дозволяє будувати форми без медіа запитів.
Давайте поглянемо на кінцевий результат (велика версія, подивіться, як змінюється макет форми):
Структура форми
Спершу, давайте розберемо структуру форми. Ми зробимо:
для групування різноманітних елементів форми ми використовуємо невпорядкований список .flex-outer;
для групування чекбоксов візьмемо невпорядкований список .flex-inner;
майже у всіх елементів форми є свої лейбли.
От і все! З допомогою двох невпорядкованих списків (можна було взяти і нумеровані списки) ми побудували досить чітку форму. Ось так вона виглядає:
- First Name
- Last Name
- Phone
- Message
-
Age
- Submit
Зверніть увагу: перед списком .flex-inner ми використовуємо тег p, а не label. В даному конкретному випадку тег label використовувати абсолютно необов’язково. Даний тег необхідно використовувати тільки для асоціації лейбла і елемента форми. Розмітка чекбоксов:
- 20-29
- 30-39
Форма з розміткою і без стилів виглядає так:
Не сама красива форма, яку ви бачили, але вона працює! Форма семантична, доступна і гнучка – можливо, найбільш важливі аспекти. Тепер можна писати стилі.
Стилі форми
Додамо в налаштуваннях демо normalize і autoprefixer:
Тепер створимо флекс контейнер. В нашому випадку це будуть:
всі елементи списку .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.
Спершу, задамо ширину 100px для прямих батьків чекбоксов:
.flex-inner li {
width: 100px;
}
Тепер за допомогою властивості justify-content вирівняємо їх уздовж головної осі. У даного властивості кілька значень, нам потрібно тільки space between:
.flex-inner {
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 і зберегти структуру і стилі від нашої форми.
