HTML CSS flexboxで幅を均一に並べたい

##flexboxで幅を均一に並べたいです。
以下のように教科リストを横並びで並べたいのですが
教科名の文字数でずれることなく均一にしたいです。
チェックボックスの位置が縦で揃うようにするにはどのような記述をするべきでしょうか？

##やってみたこと
親要素でflexを指定し子要素でflex1を指定したが均一な配置にはならなかった。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<title>教師情報編集</title>
5<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6<meta name="viewport" content="width=divece-width,initial-scale=1.0">
7<link rel="stylesheet" href="/css/style.css">
8<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
9</head>
10<body>
11	<div class="teacher-edit-wrapper">
12		<div class="teacher-edit-form">
13			<h1>教師情報編集画面</h1>
14			<form action=""
15				method="post"><input type="hidden" name="_csrf" value=""/>
16				</div>
17				<div class="teacher-edit-item">
18					<div>
19						<label for="subject" class="teacher-edit-label">指導可能な教科</label>
20					</div>
21					
22					<div class="subject-check-item">
23						
24							<label for="subject">国語</label>
25							<input type="checkbox" value="1"
26								name="selectedSubjects" checked="checked" />
27						
28							<label for="subject">算数</label>
29							<input type="checkbox" value="2"
30								name="selectedSubjects" />
31						
32							<label for="subject">理科</label>
33							<input type="checkbox" value="3"
34								name="selectedSubjects" />
35						
36							<label for="subject">社会</label>
37							<input type="checkbox" value="4"
38								name="selectedSubjects" />
39						
40							<label for="subject">英語</label>
41							<input type="checkbox" value="5"
42								name="selectedSubjects" checked="checked" />
43						
44							<label for="subject">現代文</label>
45							<input type="checkbox" value="6"
46								name="selectedSubjects" />
47						
48							<label for="subject">古文</label>
49							<input type="checkbox" value="7"
50								name="selectedSubjects" />
51						
52							<label for="subject">漢文</label>
53							<input type="checkbox" value="8"
54								name="selectedSubjects" checked="checked" />
55						
56							<label for="subject">数学</label>
57							<input type="checkbox" value="9"
58								name="selectedSubjects" />
59						
60							<label for="subject">化学</label>
61							<input type="checkbox" value="10"
62								name="selectedSubjects" checked="checked" />
63						
64							<label for="subject">物理</label>
65							<input type="checkbox" value="11"
66								name="selectedSubjects" />
67						
68							<label for="subject">生物</label>
69							<input type="checkbox" value="12"
70								name="selectedSubjects" />
71						
72							<label for="subject">世界史</label>
73							<input type="checkbox" value="13"
74								name="selectedSubjects" />
75						
76							<label for="subject">日本史</label>
77							<input type="checkbox" value="14"
78								name="selectedSubjects" />
79						
80							<label for="subject">語学</label>
81							<input type="checkbox" value="15"
82								name="selectedSubjects" />
83						
84					</div>
85				</div>
86            </div>
87       </div>
88

css
1.teacher-edit-wrapper {
2  height: 500px;
3  padding-top: 80px;
4  background-color: #f4f8fa;
5}
6
7.teacher-edit-form {
8  width: 1000px;
9  padding: 50px 0;
10  margin: 100px auto;
11  text-align: center;
12  background-color: #f7f7f7;
13  box-shadow: 0px 5px 2px rgba(30,30,30,0.1);
14}
15
16.subject-check-item {
17	display: flex;
18  flex-wrap: wrap;
19	width: 500px;
20	margin:0 auto;
21}
22
23.subject-item {
24	display: inline-block;
25	flex: 1;
26}
27

下画像の教科部分を横並びにして幅を均一にしたいです。
コードでは時給部分は省略してあります

horse_n_deer

2020/03/26 00:06

まず、記述されているコードを下記のように修正してください。 - htmlのタグが壊れている（formやbodyが閉じていない、divが閉じていない）ため、閉じる - 幅を均等にしたい対象をspanで囲む - spanで囲んだ対象に対して「subject-item」クラスを当てる（cssが定義されているだけで、html内で使用されていません）修正後、下記のように見た目が変化すると思うので、改めて質問してください。 https://jsbin.com/dobedijule/edit?html,css,output

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

回答2件

ベストアンサー

問題が2〜3あります。

** [1] class="subject-item"をもつHTML要素が見当たりません **
** [2] HTMLの<label>と<input>はひとまとめのグループにすべきです。 **

おすすめは、<label>の中に<input>を加える方法です。
チェックボックスのON/OFFができる領域を文字の部分まで広げることができます。

HTML
1<label for="subject" class="subject-item">
2  世界史
3  <input type="checkbox" value="13" name="selectedSubjects">
4</label>

どうしても<label>のなかに<input>を入れるのが嫌だ、ということであれば以下で。

HTML
1<div class="subject-item">
2  <label for="subject">世界史</label>
3  <input type="checkbox" value="13" name="selectedSubjects">
4</div>

** [3] flex: 1; は「幅を均等にする」ではなく「余白を分配し合ってそれぞれの幅に加える」という意味 **
[1]と[2]の前提でだとCSSは以下のようになります。

CSS
1.subject-check-item .subject-item {
2  flex: 0 0 6em; /* flex-basisに横幅を指定することで均一にする */
3  white-space: nowrap;
4}
5.subject-item > * {
6  display: inline-block;
7}