Flexbox для створення гнучкої форми

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

Для створення форми буде використано невпорядкований список .flex-outer
для групування різних елементів форми та .flex-inner неупорядкований список, щоб згрупувати прапорці.
Майже всі елементи керування форми поставляються разом із відповідною міткою.

Замість елемента label перед списком .flex-inner використовується елемент p. Це пов'язано з тим, що в даному випадку немає сенсу використовувати тег label. Цей тег повинен використовуватися лише для того, щоб зв'язати текстову позначку з елементом керування форми.

Розмітка для прапорців:

З готовою розміткою нестилізована форма виглядає так:

See the Pen Building Responsive Forms With Flexbox (unstyled) by kravets (@raisa69) on CodePen.

Стилі форми

1. Перш ніж стилізувати саму форму, потрібно додати нормалізацію та автопрефіксацію до налаштувань.

2. Визначити гнучкі контейнери. У даному прикладі це такі елементи:

Кожен із елементів .flex-outer списку.
Внутрішній список .flex-inner містить всі прапорці.
Крім того, потрібно вертикально центрувати елементи Flex по поперечній осі.

Щоб досягти такої поведінки, важливо створити кілька вихідних правил CSS:

3. Наступний крок – вказати ширину елементів flex.

Основні вимоги для елементів flex .flex-outer списку:

Ширина міток має бути не менше 120 пікселів і не більше 220 пікселів.
Ширина елементів форми, що з'являються після позначок, має бути не менше 220 пікселів.

Що це дає? Кожна мітка разом з асоційованим її елементом форми відображатиметься в одному горизонтальному рядку, якщо ширина форми становить не менше 340 пікселів.

У будь-якому іншому випадку всі елементи форми (крім прапорців, які будуть видні пізніше) розташовуватимуться вертикально.

Вищезгадані значення довільні - їх можна змінювати відповідно до потреб.

See the Pen Building Responsive Forms With Flexbox (first step) by kravets (@raisa69) on CodePen.

Кнопка відправлення

Для кнопки 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

See the Pen Building Responsive Forms With Flexbox (second step) by kravets (@raisa69) on CodePen.