Как установить 2 входа, чтобы иметь минимальную ширину, когда в строке?

Question

Я хотел бы отобразить имя и фамилию моих клиентов в 2 разных входах в центре клиентской страницы и дать каждому входу минимальную ширину, чтобы избежать дополнительного интервала между ними.

Я пробовалиспользовать min-width или использовать атрибут «size» для входных данных, но это вызывает проблемы, когда первый ввод содержит слишком много символов.

     <div className="input-client-name">
          <input value={this.state.fname}/>
          <input value={this.state.lname}/>
     </div>

.input-client-name {
    display: flex;
}

.input-client-name input {
    min-width: 0;
    max-width: min-content;
}

Я ожидаю вывод: «firstName LastName»не беспокоясь о длине символов каждого из них.

Answer 1

Если вы работаете с flexbox, рекомендуется не играть с width, так как мы flexbox для достижения адаптивного поведения и установки width (даже max и min widths) на значение, которое побеждает, чтоЦель.

Поскольку вы хотите, чтобы поля ввода отображались бок о бок, и в зависимости от размера окна, вы можете заключить второе поле ввода в следующую строку - добавьте flex-flow к вашему родителю.

.input-client-name {
    display: flex;
    flex-flow: row wrap;
}

flex-flow представляет собой комбинацию свойств flex-direction и flex-wrap.

Далее, вы хотите задать минимальную ширину для полей ввода, вы можетедостигните этого, используя flex-basis - который работает как начальный размер для вашего элемента.

.input-client-name input {
    flex-basis: 40%;
    margin: 8px;
}

Примечание: margin добавляется как пробел между двумя полями ввода. Вы можете использовать justify-content: space-between или justify-content: space-evenly для той же цели.

Дополнительные ссылки:

Демонстрационная скрипка для этого доступна здесь .

Хотите узнать больше о flexbox? Прочитайте хорошую статью об этом здесь . Надеюсь это поможет.

Answer 2

input {
    text-align: center;
    width: auto;
}