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

105

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