flexで余白を埋める方法

flexで要素を横並びにした時に余白を埋める方法です。
以下のようなお問い合わせフォームの入力フォームの枠をinner幅いっぱいにしたいと思います。

【結論】余白を埋めたい要素に対してflex-grow:1;を記載する

'flex-grow:1'がない場合、入力フォームの右側には余白があります。
（明るいグレーのインナー幅いっぱいまで広がっていない。）

<div class="outer">
  <div class="inner">
    <div class="contactForm">
      <p class="name">お名前</p>
      <p class="must">必須</p>
      <input class="input" type="text" placeholder="名前">
      </div>
    </div>
  </div>
</div>

.contactForm {
  display: flex;
  align-items: center;
  gap: 20px;
}

.must {
  padding: 2px 14px;
  background-color: #ff9a01;
  border-radius: 5px;
  color: #fff;
}

.input {
  padding: 5px 10px;
}

.outer {
  background-color: #ccc;
}

.inner {
  width: 400px;
  margin: 0 auto;
  background-color: #eee;
}

input要素に'flex-grow:1'を追加します。
すると、入力フォームがインナー幅いっぱいまで広がりました。

.input {
  padding: 5px 10px;
  flex-grow:1 //コレを追加
}

まとめ

'flex-grow:1'だけで余白をきれいに埋めることができますよ。