Как правильно сделать форму с помощью flexbox?

Question

[Анастасия]

Есть вот такая форма:



Меня интересует как правильно разместить в ней элементы с помощью flexbox, чтобы они правильно адаптировались при уменьшении экрана. А также есть подобные формы, но, например, в одной форме нет поля для телефона и важно чтобы я не меняла ширину каждый раз для другой формы, а инпуты сами к ней приспосабливались. Такое реально сделать?

Comments

[Евгений]

Попробуйте форме:
flex-wrap: wrap;

Блоку e-mail:
flex-grow: 1;

[Евгений]

Либо есть лайфхак один))


Правда я там тестил с двумя скрытыми изначально блоками, на них не надо обращать внимания))

Answer 1

[approximate solution]

Для выполнения данной разметки нужно минимальное знание флексов.
display: flex flex-wrap: wrapдля родителя form
flex-basis flex-grow - для label и инпут(в зависимости от того будете ли вы оборачивать input.
В целом всё. Далее вы меняете данные значения в зависимости от media(если нужно).
Начните верстать на codepen. Если не получиться - поправлю.

Comments

[Анастасия]

Сделала как-то так. Насколько это правильно?

<form action="">
                                <div class="form-group">
                                    <label for="company">Firma:</label>
                                    <input type="text" id="company" class="input-control">
                                    <label for="phone" class="right-inline">Telefon:</label>
                                    <input type="text" id="phone" class="input-control">
                                    <button>Lang</button>
                                </div>

                                <div class="form-group">
                                    <label for="company">Firma:</label>
                                    <input type="text" id="company" class="input-control">
                                </div>
                            </form>

.form-group {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.form-group label {
    flex: none;
    display: block;
}

.form-group label.right-inline {
    text-align: right;
    width: auto;
}

.form-group .input-control {
    flex: 1 1 auto;
    display: block;
}

[approximate solution]

Анастасия, https://codepen.io/approximate_solution2k20/pen/LYGRrWQ
Да, всё правильно. Единственное - вы должны будете на мобильных поправить стили. Что бы всё смотрелось адекватно.

[Анастасия]

approximate solution, спасибо большое

[approximate solution]

Анастасия, Вы всё сами сделали)

[approximate solution]

Анастасия,
https://codepen.io/approximate_solution2k20/pen/LYGRrWQ

[Анастасия]

approximate solution, спасибо

[Анастасия]

approximate solution, Есть проблема с этими инпутами. Когда я в div .form-group вставляю другой div (или какой-то другой элемент) он выходит за пределы .form-group .
Есть ли какая-то возможность регулировать ширину этих инпутов? И чтобы они уменьшались в зависимости от других элементов находящихся в .form-group
Предыдущий код с кнопкой который Вы мне прислали, к сожалению, не обновился в codepen

[Анастасия]

approximate solution, Там еще может быть проблема связана с тем что я задаю padding для инпутов

[approximate solution]

Анастасия, свой телеграмм скажите, я отпишусь, и постараюсь помочь.