Как выровнять по вертикали и растянуть по горизонтали несколько входов, используя только начальную загрузку?

Question

В качестве учебного упражнения я хотел бы использовать только Bootstrap Flex (или CSS3 flexbox ) для выравнивания по вертикали по левому краю и растяжения по горизонтали по горизонтали.Я знаю о Bootstrap Grid (и CSS3 макет сетки ), но я не хочу использовать это.

Вот код (также на codepen.io )

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex flex-wrap flex-column">
      <div class="d-flex flex-row">
		  <div class="flex-fill"><label>Field ABC 1</label></div>
		  <div class="flex-fill"><input   type="text" /></div>
      </div>
      <div class="d-flex flex-row">
		  <div class="flex-fill"><label>Field Long DEF 123 </label></div>
		  <div class="flex-fill align-self-stretch"><input type="text" /></div>
      </div>
      <div class="d-flex flex-row">
		  <div class="flex-fill"><label>Field3</label></div>
		  <div class="flex-fill align-self-stretch"><input type="text" /></div>
      </div>
    </div>
    

И это выглядит примерно так

---

---

I 'мы попробовали настроить align-self- * на элементах div, но безуспешно.Я также попытался поместить класс непосредственно на вход.

Затем я удалил элементы div вокруг меток и входов.Теперь они растягиваются по горизонтали, но по-прежнему без вертикального выравнивания.

И теперь результат выглядит следующим образом

---

---

Как подвопрос, я обернул каждый вход (и каждый ярлык) в div.Это правильно / хорошо / рекомендовано (с точки зрения технической поддержки Html / CSS) или это излишне?

Answer 1

Так что я не мог решить это, используя только Bootstrap Flex, но я сделал это частично с помощью CSS3 Flexbox.

Я в основном удалил .flex-fill (Bootstrap устанавливает для него значение flex: auto 1 1, которое нам не нужно) и использовал вместо него свойство flex-basis: <size>.И я использовал justify-content-between для выравнивания входов вправо.

Codepen

Код:

input {
  flex-basis: 50%; /* default auto */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="d-flex flex-wrap flex-column">
      <div class="d-flex flex-row justify-content-between">
		  <label>Field ABC 1</label>
		  <input type="text" />
      </div>
      <div class="d-flex flex-row justify-content-between">
		  <label>Field Long DEF 123 </label>
		  <input type="text" />
      </div>
      <div class="d-flex flex-row justify-content-between">
		  <label>Field3 </label>
		  <input type="text" />
      </div>
    </div>

И о вашем втором вопросе: избегайте ненужных делений, они увеличивают DOM и замедляют производительность.

Answer 2

.flex-c input{
width:80%;
  height:50px;
}
.flex-c label{
width:18%}
.flex-c{
  align-items:center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="d-flex flex-wrap flex-column">
      <div class="d-flex flex-row flex-c">
		  <label>Field ABC 1</label>
		  <input type="text" />
      </div>
      <div class="d-flex flex-row flex-c">
        <label>Field Long DEF 123 </label>
		  <input type="text" />
      </div>
      <div class="d-flex flex-row flex-c">
		  <label>Field3</label>
		  <input type="text" />
      </div>
    </div>

только что удалены некоторые классы!