CSS width、max-width、及び flexbox を用いたラベルと入力欄の配置

事例 1: HTML と CSS を使用した、ラベル、入力欄、及び flexbox レイアウトの配置

次の事例では、HTML と CSS を用いて、ビューポートを含む可変幅のコンテナの中にラベルと入力欄を配置する。レイアウト領域は、ビューポートの調整に合わせてサイズが調整される。その後、ラベルと入力欄は、レイアウト領域のコンテナ内に収まるようにサイズが調整される。

水平方向のスクロールを必要とすることなくズームレベルを 400% に上げることができる。この事例ではラベルと入力欄の width と max-width にパーセントサイズを使用している。また、select のような置換要素は内在寸法を持つため、要素がグリッドからはみ出るのをクロスブラウザ的に防ぐため max-width を指定している。

<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 id="favorite-fruit" class="form-col-8">
    <select>
      <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>Submit</button>
  </div>
</div>

動作例: Using Adjustable Labels and Inputs for Reflow