Блог

Я пытаюсь создать форму, в которой есть входные данные для имени и фамилии. Я бы хотел, чтобы мои входные данные были встроенными, а также занимали 100% доступного пространства по горизонтали, и когда места недостаточно, они переносятся. Вы можете видеть, что это отлично работает в этом jsfiddlehttps://jsfiddle.net/sbfm9ygo/22 / (входные данные являются встроенными, и когда вы уменьшаете экран, они автоматически переносятся).

Я могу добиться этого с помощью flexbox, используя flex-wrap свойство , но только тогда, когда ширина моих элементов не равна 100%. В jsfiddle, если вы раскомментируете width: 100% , вы заметите, что это больше не работает. Как я могу добиться функциональности, показанной в jsfiddle, при этом мои элементы занимают 100% доступного пространства? Я пытаюсь сделать это без использования медиа-запросов.

Вы можете исправить это, используя flex-grow: 1; вместо width: 100% :

 .form-container {
  display: flex;
  flex-wrap: wrap;
}

.form-container div {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin: 1rem;
}  

 <div class="form-container">

  <div>
    <label>Label1</label>
    <input value="input1" />
  </div>

  <div>
    <label>Label2</label>
    <input value="input2" />
  </div>

</div>  

Проверьте jsfiddle.

flex : 1 разделит их поровну и min-width: 150px; предотвратит input уменьшение размера

 .form-container {
  display: flex;
  flex-wrap: wrap; 
}

.form-container div {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 150px;
  margin: 1rem;
}  

 <div class="form-container">

  <div>
    <label >Label1</label>
    <input value="input1"/>
  </div>

  <div>
    <label >Label2</label>
    <input value="input2"/>
  </div>

</div>  

JSFiddle