C38Usar width, max-width y flexbox de CSS para ajustar las etiquetas y los campos de entrada

Ajustar etiquetas, campos de entrada y disposición flexbox con HTML y CSS.

El siguiente ejemplo utiliza HTML y CSS para ajustar etiquetas y campos de entrada dentro de contenedores de distintas anchuras, incluida la ventana gráfica. Las regiones de la disposición cambian de tamaño cuando se modifica la ventana gráfica. A continuación, las etiquetas y los campos de entrada ajustan su tamaño para caber dentro de los contenedores de las regiones de la disposición.

El nivel de zoom puede aumentarse hasta el 400 % sin que haga falta desplazamiento horizontal. Este ejemplo concreto utiliza un tamaño en porcentaje para width y max-width en las etiquetas y los campos de entrada. Se aplica max-width para corregir, de forma compatible con todos los navegadores, que los elementos se salgan de la rejilla, ya que los elementos reemplazados, como select, tienen un dimensionado intrínseco.

<style>
/* Fitting Inputs Styling */
.form-group {
  display: flex;
  flex-flow: row wrap;
  margin: 0 -1rem 1rem -1rem;
}
[class*="form-col"] {
  flex: 0 1 100%;
  padding: 0 1rem;
}
@media (min-width: 576px) {
  .form-col-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
  .form-col-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
  .offset-form-col-4 {
    margin-left: 33.33333%;
  }
}
input {
  display: block;
  width: 100%;
}
label, select {
  display: block;
  width: 100%;
  max-width: 100%;
}
</style>
<div class="form-group">
  <div class="form-col-4">
    <label for="fname">First Name</label>
  </div>
  <div class="form-col-8">
    <input type="text" id="fname" autocomplete="given-name">
  </div>
</div>
<div class="form-group">
  <div class="form-col-4">
    <label for="lname">Last Name</label>
  </div>
  <div class="form-col-8">
    <input type="text" id="lname" autocomplete="family-name">
  </div>
</div>
<div class="form-group">
  <div class="form-col-4">
   <label for="favorite-fruit">Favorite fruit</label>
  </div>
  <div class="form-col-8">
    <select id="favorite-fruit">
      <option>Banana</option>
      <option>Pineapple</option>
      <option>Strawberry</option>
    </select>
  </div>
</div>
<div class="form-group">
  <div class="offset-form-col-4 form-col-8">
    <button type="submit">Submit</button>
  </div>
</div>

Ejemplo práctico: Usar etiquetas y campos de entrada ajustables para el reajuste (reflow)