横並び（フレックス）Flexbox

「横並び（フレックス）（Flexbox）」を実装してください。

## これは何か
要素を一列に並べ、余った幅の配り方を決める配置の考え方。ボタンの並びやヘッダーに使う。

## 使いどころ
- 要素を横一列に並べ、間隔や寄せ方を決めたいとき
- 幅が足りないときに折り返させたいとき

## 実装の要件
- display: flex + gap。子には flex: 1 1 auto などを明示する
- 折り返すなら flex-wrap: wrap を付ける
- 子要素に幅を書かないと、内容の長さで勝手に決まる。flex の3値で意図を書く
- flex-wrap を忘れると、狭い画面で横に溢れる
- 縦横の両方を揃えたいならグリッドのほうが素直。flex を入れ子にして作らない

## アクセシビリティの要件
- 見た目の並び順と DOM の順序を一致させる。row-reverse で入れ替えると操作順が食い違う
- 折り返したときも、読む順序が保たれるようにする

## 参考にする実装
この形を出発点にして、プロジェクトの命名規則・色・余白に合わせて調整してください。

```html
<div class="x-flex">
  <span class="x-flex__a">伸びる</span>
  <span class="x-flex__b">固定</span>
  <span class="x-flex__b">固定</span>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-flex,
.x-flex *:not([class*="fa-"]),
.x-flex *:not([class*="fa-"])::before,
.x-flex *:not([class*="fa-"])::after {
  box-sizing: border-box;
  /* 貼った先の既定の書体に引きずられないようにする。書体が変わると
     文字の幅と高さが変わり、枠のサイズまでずれる */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
}

.x-flex {
  display: flex;
  gap: 8px;
  width: 232px;
}
.x-flex__a,
.x-flex__b {
  display: grid;
  place-items: center;
  height: 42px;
  border: 1px solid #cfd4dc;
  border-radius: 6px;
  background: #fff;
  font-size: 11.5px;
  color: #606a7b;
}
.x-flex__a {
  flex: 1 1 auto;
  border-color: #1d4ed8;
  color: #1d4ed8;
}
.x-flex__b {
  flex: 0 0 60px;
}
```

## 出力の約束
- HTML と CSS を分けて出す。JavaScript が要るときは素の JavaScript で書き、UIフレームワークは使わない。
- 参考実装がアイコンに Font Awesome のクラスを使っている場合は、プロジェクトで使っているアイコンかインライン SVG に置き換えてよい。
- 上のアクセシビリティ要件を満たす。満たせない箇所があるときは、理由を添えて先に知らせる。
- 色・角丸・余白は既存のデザイントークンがあればそれを使う。無ければ CSS 変数として切り出す。