縦棒の位置が揃わない。

上記画像のように文字と文字の間の縦棒の位置を揃えたいのですがやり方がわかりません。

html
1            <ul class="flow_of_use__wrapper">
2                <li class="flow_of_use__list">
3                    <p class="flow_of_use__list--num">01</p>
4                    <p class="flow_of_use__list--title">お問い合わせ</p>
5                    <span class="flow_of_use__list--var">|</span>
6                    <p class="flow_of_use__list__txt">まずはフォームまたはお電話からお申し込みください。</p>
7                </li>
8                <li class="flow_of_use__list">
9                    <p class="flow_of_use__list--num">02</p>
10                    <p class="flow_of_use__list--title">ヒアリング</p>
11                    <span class="flow_of_use__list--var">|</span>
12                    <p class="flow_of_use__list__txt">現在の学習状況やTOEFLスコア、目標のスコアをお聞きします。</p>
13                </li>
14                <li class="flow_of_use__list">
15                    <p class="flow_of_use__list--num">03</p>
16                    <p class="flow_of_use__list--title">学習プランの提供</p>
17                    <span class="flow_of_use__list--var">|</span>
18                    <p class="flow_of_use__list__txt">目標達成のために最適な学習プランをご提案致します。</p>
19                </li>
20                <li class="flow_of_use__list">
21                    <p class="flow_of_use__list--num">0４</p>
22                    <p class="flow_of_use__list--title">ご入金</p>
23                    <span class="flow_of_use__list--var">|</span>
24                    <p class="flow_of_use__list__txt">お申込み完了後、レッスンがスタートします。</p>
25                </li>
26            </ul>

css
1.flow_of_use__list{
2  background-color: #F8F8F8;
3  display:-webkit-box;
4  display:-ms-flexbox;
5  display:flex;
6  -webkit-box-align: center;
7	-ms-flex-align: center;
8	align-items: center;
9  margin-bottom: 8px
10}
11
12.flow_of_use__list--num{
13  background-color: var(--secondary_color);
14  color: #fff;
15  font-size:16px;
16  font-weight: bold;
17  display: flex;
18  align-items: center;
19  justify-content: center;
20  height: 64px;
21  width: 64px;
22}
23
24.flow_of_use__list--title{
25  font-size: 18px;
26  font-weight: bold;
27  color: var(--basecolor);
28  margin-left: 21px;
29}
30
31.flow_of_use__list--var{
32  font-size: 25px;
33  color:#C3C3C3;
34  margin: 0 25px;
35}
36
37.flow_of_use__list__txt{
38  font-size: 16px;
39  color: var(--basecolor);
40}

上記コードが私が書いたコードなのですが、結果は下の画像のようになっています。

<span class="flow_of_use__list--var">|</span>
に左右のマージンを入れる。くらいしか思い付かずそのほかの方法がイメージできません。

解決方法をご教授ください。

行動規範の内容に同意します

回答1件

ベストアンサー

番号と項目名の要素に flexで幅の拡張・縮小を禁止して適切な幅を設定するようにしましょう。

flex - CSS: カスケーディングスタイルシート | MDN

css
1.flow_of_use__list--num{
2  background-color: var(--secondary_color);
3  color: #fff;
4  font-size:16px;
5  font-weight: bold;
6  display: flex;
7  align-items: center;
8  justify-content: center;
9  height: 64px;
10  width: 64px;
11  flex: 0 0 64px; /* 追加 */
12}
13
14.flow_of_use__list--title{
15  font-size: 18px;
16  font-weight: bold;
17  color: var(--basecolor);
18  margin-left: 21px;
19  flex:0 0 150px;  /* 追加 */
20}