横並び要素を一行 (折り返しなし) にしたい。

前提・実現したいこと

div 要素を横 1 行に並べたい。

発生している問題

5 番目の要素が折り返されてしまう。

該当のソースコード

css
1@charset "UTF-8";
2@import url('https://fonts.googleapis.com/css?family=Karla');
3* {
4  box-sizing:border-box;
5  /* tap */
6  -webkit-tap-highlight-color: rgba(0,0,0,0);
7  -webkit-box-shadow: none;
8  box-shadow: none;   
9  outline: none;
10}
11*:focus { outline: none; }
12
13html { overflow-y:scroll; }
14body {
15	margin:0; padding:0;
16	font-size:15px; line-height:1.7; letter-spacing:0.05em;
17	color:black;
18	font-family: "游ゴシック Medium", Yu Gothic Medium, "游ゴシック", Yu Gothic, "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, sans-serif;
19	background:#fff;
20}
21
22b, strong, .bold {
23 font-family: "游ゴシック", Yu Gothic, "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, sans-serif;
24}
25
26ol, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, h7, form, p { margin:0; padding:0; }
27img { border:0; }
28li { list-style-type:none; }
29
30a { overflow:hidden; -webkit-transition:.2s linear; -moz-transition:.2s linear; -o-transition:.2s linear; transition:.2s linear; }
31a:link		{ color:black; text-decoration:none; }
32a:visited	{ color:#000; }
33a:hover		{ color:#cc141c; }
34a:hover span{ color:#cc141c; }
35a:active	{ color:#cc141c; }
36a img {
37	-webkit-transition:.2s linear;
38	-moz-transition:.2s linear;
39	-o-transition:.2s linear;
40	transition:.2s linear; }
41a.fade:hover img { opacity:0.7; }
42
43a.underline { text-decoration:underline; color:#cc141c; }
44a.underline:hover { color:#cc141c; }
45a.blank:after {
46	content:""; display:inline-block; width:15px; height:11px; margin-left:5px;
47	background:url("../img/blank.png") 0 0 no-repeat; background-size:15px 11px; }
48a.blank:hover:after { background:url("../img/blank_r.png") 0 0 no-repeat; background-size:15px 11px; }
49a.arrow:before {
50	content:""; display:inline-block; width:5px; height:10px; margin:0 8px;
51	background:url("../img/arrow_right_b.png") 0 0 no-repeat; background-size:5px 10px; }
52a.arrow:hover:before { background:url("../img/arrow_right_r.png") 0 0 no-repeat; background-size:5px 10px; }
53
54img { max-width:100%; height:auto; vertical-align:top; }
55
56/* clearfix */
57.clearfix:after {  
58	visibility: hidden;  
59	display: block;  
60	font-size: 0;  
61	content: " ";  
62	clear: both;  
63	height: 0;  
64}  
65* html .clearfix { zoom: 1; } /* IE6 */  
66*:first-child+html .clearfix { zoom: 1; } /* IE7 */  
67
68.txt_c { text-align:center; }
69.txt_l { text-align:left; }
70.txt_r { text-align:right; }
71
72.clear { clear:both; }
73.hidden { visibility:hidden; }
74
75.serif { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", serif; }
76.en    { font-family: Karla, Century Gothic, Futura,sans-serif; }
77.bold  { font-weight:bold; }
78.big   { font-size:120%; }
79.small { font-size:88%; }
80.red   { color:#df003a!important; }
81.white { color:#fff!important; }
82.black { color:#000!important; }
83
84body.fixed { position:fixed; width:100%; height:100%; }
85.con { position:relative; margin:auto; }
86
87/* common */
88p { margin-bottom:20px; }
89p:last-child { margin-bottom:0; }
90.con { position:relative; text-align:left; }
91
92.all { text-align:right; margin:-20px 0 50px; font-size:14px; letter-spacing:0.075em; }
93.all a:after { content:""; display:inline-block; width:20px; height:6px; margin-left:10px; background:url("../img/arrow_b.png") 0 0 no-repeat; }
94.all a:hover:after { background:url("../img/arrow_r.png") 0 0 no-repeat; }
95
96@media (min-width: 769px) {
97  .sp { display:none; }
98  .con { width:1280px; }
99}
100
101#contents { padding:28px 0 28px; }
102#wrapper { font-size:14px; }
103/* ===============================
104						page
105=================================*/
106.page { position:relative; flex:0 0 auto;}
107.page.ac1st { margin-left: 10pt; margin-right: 72px; }
108.page.ac { margin-right: 72px; }
109.page.acLast { margin-right: 10pt; }
110.page.acLast:after { content:none; }
111.pTitle a { display:flex; color:black;}
112.stripeNone .pTitle a { background:#eeeded;  }
113.stripeBlue .pTitle a { background:repeating-linear-gradient(-45deg,#cce7ff,#cce7ff 3px,#e9f4ff 3px,#e9f4ff 7px); }
114.stripeGrey .pTitle a { background:repeating-linear-gradient(-45deg,#ECEEF1,#ECEEF1 3px,#d6d6d7 3px,#d6d6d7 7px); }
115.stripePink .pTitle a { background:repeating-linear-gradient(-45deg, #ffeff7, #ffeff7 3px, #ffcccc 3px, #ffcccc 7px); }
116.stripeGreen .pTitle a { background:repeating-linear-gradient(-45deg, #BFFFA8, #BFFFA8 3px, #FBFFCC 3px, #FBFFCC 7px); }
117#tileEquipment .pTitle a:hover { background:#cc141c; }
118.pTitle a:hover { background:gray; }
119.pTitle a:hover .txt h4 { color:#fff; }
120.pTitle .txt { width:100%; padding:12px 21px 0px 75px; position:relative; }
121.pTitle .txt .num { color:#d5001e; font-size:19px; font-weight:bold; letter-spacing:0.1em; position:absolute; top:12px; left:12px; }
122.pTitle .txt .num:before { content:""; display:inline-block; width:12px; height:15px; margin-right:5px; vertical-align:0px; background:url("/line.png") 0 0 no-repeat; background-size:contain; }
123.pTitle .txt h4 { font-size:20px; margin-bottom:12px; color:black; }
124
125#tileEquipment > .section { display: flex; }
126

html
1<section id="contents">
2  <section id="wrapper" class="con clearfix"> 
3    <section id="tileEquipment">
4        <div class="section">
5            <!--01-->
6            <div class="page ac1st stripeNone">
7                <div class="pTitle">
8                    <a href="#" class="noscroll">
9                        <div class="txt bold">
10                            <span class="en num">01</span>
11                            <h4><strong>Icon A</strong></h4>
12                        </div>
13                    </a>
14                </div>
15            </div>
16            <!--02-->
17            <div class="page ac stripeBlue">
18                <div class="pTitle">
19                    <a href="#" class="noscroll">
20                        <div class="txt">
21                            <span class="en num">02</span>
22                            <h4><strong>Icon B</strong></h4>
23                        </div>
24                    </a>
25                </div>
26            </div>
27            <!--03-->
28            <div class="page ac stripeGrey">
29                <div class="pTitle">
30                    <a href="#" class="noscroll">
31                        <div class="txt">
32                            <span class="en num">03</span>
33                            <h4><strong>Icon C</strong></h4>
34                        </div>
35                    </a>
36                </div>
37            </div>
38            <!--04-->
39            <div class="page ac stripePink">
40                <div class="pTitle">
41                    <a href="#" class="noscroll">
42                        <div class="txt bold">
43                            <span class="en num">04</span>
44                            <h4><strong>Icon D</strong></h4>
45                        </div>
46                    </a>
47                </div>
48            <!--05-->
49            <div class="page acLast stripeGreen">
50                <div class="pTitle">
51                    <a href="#" class="noscroll">
52                        <div class="txt bold">
53                            <span class="en num">05</span>
54                            <h4><strong>Icon E</strong></h4>
55                        </div>
56                    </a>
57                </div>
58            </div>
59        </div>
60    </section><!--tileEquipment-->
61  </section><!--wrapper-->
62</section><!--contents-->
63

試したこと

css
1#tileEquipment > .section { display: flex; flex-wrap:nowrap;}

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

kei344

2020/06/07 05:18

質問タグの「Flex」はCSSのFlexBoxとは無関係なのではずして置いてください。

BetterEveryday

2020/06/07 07:55

申し訳ございません。修正依頼ありがとうございました。

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

回答1件

ベストアンサー

5 番目の要素が折り返されてしまう。

4番目の要素の閉じタグ（</div>）が不足しているので、5番目の要素が4番目の要素の子要素と解釈されてしまってます。

5番目の要素の前に、</div> を追加すれば解決するでしょう。

エディターは何をお使いでしょうか。
コーディング用のエディタを使えば、開始タグと閉じタグの対応を見やすく表示できますので、そのようなミスは防げます。
私はVSCodeを使用してますが、提示のコードをVSCodeに貼り付けてフォーマットしてすぐに不足が確認できました。

投稿2020/06/07 06:32

編集2020/06/07 06:40

hatena19

総合スコア33715

BetterEveryday

2020/06/07 08:22 編集

hatena19 さんご回答どうもありがとうございます。たしかに 4 番目の要素の閉じタグ不足で、追加により解決できました。エディタはサクラエディタを初期状態のまま使用しています。今回紹介いただいた Visual Studio Code を早速インストールしてみたところ、エディタ上の色番号はどんな色か視認でき、開始タグと閉じタグも罫線で結ばれることに感激しています。今回も親身に助言いただきましてとても助かりました。誠にありがとうございました。

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