チェック欄を縦に揃える方法が分かりません。

Question

ケーキ（.input-03）とデコ（.input-06）のチェック欄を縦方向で揃えたいのですが、
どうしても上手く行きません。
よろしくお願い致します。

(1) .input-06の右側にpaddingやmarginを入れると冷んやり（.input-05）が左にずれてしまう。
(2) flexの代わりにfloatを利用して各項目にwidthを設定しても、定間隔にレイアウト出来ませんでした。

(HTML)
<div class="ctr-03"><!-- /.ctr-03 ここから↓ -->
  <form class="form-03" action="#" method="post"><!-- /.form-03 ここから↓ -->
    <fieldset class="fieldset-03"><!-- /.fieldset-03 ここから↓ -->
      <legend class="legend-02">調理のタイプ（複数可）</legend>
      <div class="wrap-01"><!-- /.wrap-01 ここから↓ -->
        <label class="label-08"><input class="input-01" type="checkbox" name="type" value="定番チョコ">定番チョコ</label>
        <label class="label-09"><input class="input-02" type="checkbox" name="type" value="焼き菓子">焼き菓子</label>
        <label class="label-10"><input class="input-03" type="checkbox" name="type" value="ケーキ">ケーキ</label>
      </div><!-- /.wrap-01 ここまで↑ -->
      <div class="wrap-02"><!-- /.wrap-02 ここから↓ -->
        <label class="label-11"><input class="input-04" type="checkbox" name="type" value="アレンジ">アレンジ</label>
        <label class="label-12"><input class="input-05" type="checkbox" name="type" value="冷んやり">冷んやり</label>
        <label class="label-13"><input class="input-06" type="checkbox" name="type" value="デコ">デコ</label>
      </div><!-- /.wrap-02 ここまで↑ -->
      <div class="wrap-10">
        <label class="label-14"><input class="input-07" type="checkbox" name="type" value="その他">その他</label>
      </div><!-- /.wrap-10 ここまで↑ -->
    </fieldset><!-- /.fieldset-03 ここまで↑ -->
  </form><!-- /.form-03 ここまで↑ -->
</div><!-- /.ctr-03 ここまで↑ -->

(CSS)
/* チェックボックスの幅を設定する。 ここから↓ */
.wrap-01,
.wrap-10 {
  display:flex;
  justify-content:space-between;
}

.wrap-02 {
  display:flex;
  justify-content:space-between;
}

/* .ctr-03内の文字列を中央に配置する */
.ctr-03 {
  text-align:center
}


/* 【フォーム欄】 ここから↓ */
[class|="form"] {
  padding-top: .5em;
  padding-bottom: .1875em;
}

/* フォーム欄の見出し ここから↓ */
[class|="legend"] {
  padding-bottom: .25em;
  padding-top: .25em;
  font-weight:bold;
}

.legend-02 {
  padding-bottom: .5em;
}
/* フォーム欄の見出し ここまで↑ */

Answer 1

/* チェックボックスの幅を設定する。 ここから↓ */
.wrap-01,
.wrap-02 {
  display:flex;
}

.wrap-01 [class|="label"],
.wrap-02 [class|="label"] {
  flex:1
}
/* チェックボックスの幅を設定する。 ここまで↑ */

Answer 2

結果オーライの単純な手当としては、各inputタグの後にbrタグを付加し、文字幅も影響するのであれば、value="ケーキ　　" のように文字数を5文字にしたりしてはどうでしょうか。

Comments

[taka_oct092018]

返信ありがとうございます。

Answer 3

teratailの質問「横並びのリストを縦並びにしたい」のようにCSSにおいて "display: flex;" を指定しているので並列表示になってしまいます。これを削除してみましょう。

Comments

[taka_oct092018]

seastar3様、回答ありがとうございます。
こちらの質問の仕方に問題がありました。
正しくは「横並びリストのチェック欄の部分を縦方向にも揃える」でした。
揃えるのは.input-03と.input-06の２つです。