display: flex;　が効かない

お世話になります。

サイト模写をしています。cssにて教えてください。

前提・実現したいこと

４つの要素を、縦横２列に配置したいのですが、
display: flex;を入れて、横並びが効きません。
どういった原因が考えられますでしょうか。。

###元のサイトのコード

css
1#about ul {
2  display: flex;
3  justify-content: space-between;
4  flex-wrap: wrap;
5  margin-bottom: 40px;
6}

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="jp" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title>coffee shop</title>
6    <meta name="description" content="coffee shop">
7
8    <!---レスポン--->
9    <meta name="viewport" content="width=device-width,initial-scale=1">
10
11    <link rel ="preconnect" href = "https://fonts.gstatic.com" crossorigin>
12    <link href ="https：//fonts.googleapis.com/css2？family = M + PLUS + Rounded + 1c：wght @ 700＆ display = swap "rel =" stylesheet ">
13    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
14    <link rel="stylesheet" href="css/style.css" >
15    <link rel="stylesheet" href="css/responsive.css" >
16    <link rel="icon" type="image/png" href="img/favicon.ico">
17    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
18    <script src="js/main.js"></script>
19</head>
20
21
22
23
24  <body>
25    <header id ="header" class="big-bg">
26
27      <nav>
28        <ul class="header-menu">
29          <li>
30            <a href="#">MENU</a>
31          </li>
32          <li>
33            <a href="#">ABOUT</a>
34          </li>
35          <li>
36            <a href="#">LOCATION</a>
37          </li>
38        </ul>
39      </nav>
40
41
42      <h1 class="title">
43        <img src="img/logo.svg" alt="coffee">
44      </h1>
45</header>
46
47<main>
48
49  <section id="menu">
50
51    <div class="menu-img fixed-bg">
52      <h2 class="sectiontitle">MENU</h2>
53      </div>
54      <div class="content wrapper">
55        <div class="content1">
56        <div class="coffee">
57          <h3>COFFEE</h3>
58          <dl class="menu-list">
59            <dt>××××××××××××</dt>
60            <dd>¥500</dd>
61            <dt>××××××××××××</dt>
62            <dd>¥500</dd>
63            <dt>××××××××××××</dt>
64            <dd>¥500</dd>
65            <dt>××××××××××××</dt>
66            <dd>¥500</dd>
67            <dt>××××××××××××</dt>
68            <dd>¥500</dd>
69            <dt>××××××××××××</dt>
70            <dd>¥500</dd>
71            <dt>××××××××××××</dt>
72            <dd>¥500</dd>
73            <dt>××××××××××××</dt>
74            <dd>¥500</dd>
75            <dt>××××××××××××</dt>
76            <dd>¥500</dd>
77            <dt>××××××××××××</dt>
78            <dd>¥500</dd>
79          </dl>
80
81          </div>
82
83        </div>
84        <div class="content2">
85          <div class="food">
86            <h3>FOOD</h3>
87            <dl class="menu-list">
88              <dt>××××××××××××</dt>
89              <dd>¥500</dd>
90              <dt>××××××××××××</dt>
91              <dd>¥500</dd>
92              <dt>××××××××××××</dt>
93              <dd>¥500</dd>
94            </dl>
95
96            <h3>OTHER</h3>
97            <dl class="menu-list">
98              <dt>××××××××××××</dt>
99              <dd>¥500</dd>
100              <dt>××××××××××××</dt>
101              <dd>¥500</dd>
102              <dt>××××××××××××</dt>
103              <dd>¥500</dd>
104            </dl>
105          </div>
106
107        </div>
108      </div>
109</section>
110
111<section id="about">
112  <div class="about-img fixed-bg">
113    <h2 class="sectiontitle">ABOUT</h2>
114  </div>
115
116  <div class="content3 wrapper">
117    <div class="about-item">
118    <h3>COFFEE</h3>
119    <ul>
120      <li>
121        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
122        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
123        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
124        テキストテキストテキストテキストテキストテキスト</li>
125      <li>
126        TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
127        TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
128        TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
129        TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
130      </li>
131      <li>
132        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
133        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
134        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
135        テキストテキストテキストテキストテキストテキスト
136      </li>
137      <li>
138        TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
139        TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
140        TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
141        TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
142      </li>
143    </ul>
144
145    <div class="readmore">
146    <a href="#">Read More</a>
147    </div>
148
149    </div>
150
151  </div>
152
153</section>
154
155
156
157
158</main>
159
160  </body>
161</html>
162

CSS
1@charset "UTF-8";
2
3html {
4  font-size: 100%;
5}
6
7body {
8  font-family: "Helvetica Neue", "Arial", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
9  font-size: 0.9rem;
10  line-height: 1.7;
11}
12
13
14a {
15  text-decoration: none;
16}
17
18
19img {
20  max-width: 100%;
21}
22
23
24li {
25  list-style: none;
26}
27
28.wrapper {
29  max-width: 1000px;
30  padding: 90px 16px 150px 16px;
31  margin: 0 auto;
32  text-align: center;
33}
34
35/*　↑↑↑コンテンツ幅を設定するための共通クラス*/
36.big-bg {
37  background-size: cover;
38  background-position: center top;
39  background-repeat: no-repeat;
40
41}
42
43
44#header {
45  background-image: url(../img/cafe.jpg);
46  min-height: 100vh;
47  background-size: cover;
48  background-position: center top;
49  background-repeat: no-repeat;
50  padding: 20px 40px;
51  position: relative;
52}
53
54.header-menu {
55  display: flex;
56  justify-content: flex-end;
57}
58
59h1 {
60  text-align: center;
61  padding-top: 200px;
62}
63
64.header-menu a {
65  color: #fff;
66  font-size: 20px;
67  filter: drop-shadow(1px 1px 2px #121212);
68  padding-right: 30px;
69  font-weight: bold;
70}
71
72.header-menu li {
73  margin-top: 20px;
74}
75
76.header-menu a:hover {
77  color: #e03131;
78}
79
80.content {
81  display: flex;
82  justify-content: center;
83}
84
85.sectiontitle {
86  width: 100%;
87  font-size: 4.5rem;
88  color: #fff;
89  text-align: center;
90  filter: drop-shadow(1px 1px 10px #c0c0c0);
91  position: absolute;
92  top: 30%;
93
94
95}
96
97.content1 {
98  width: 50%;
99  margin: 0 45px;
100  border-right: solid 1px #000;
101
102}
103
104
105
106
107.content2 {
108padding-left: 10px;
109width: 50%;
110}
111
112h3 {
113  font-size: 2.5rem;
114  border-bottom: solid 6px #e03131;
115  margin-bottom: 70px;
116  display: inline-block;
117}
118
119#menu .menu-list {
120  display: flex;
121  flex-wrap: wrap;
122}
123
124
125
126#menu dt {
127  width: 87%;
128  font-size: 14.4px;
129  border-bottom: 1px dotted #000 ;
130  text-align: left;
131  margin-bottom: 25px;
132
133}
134
135
136#menu dd {
137  width: 13%;
138  font-size: 14.4px;
139  text-align: right;
140  padding-right: 50px;
141}
142
143.fixed-bg {
144  height: 300px;
145  background-attachment: fixed;
146  background-size: cover;
147  background-position: center;
148  background-image: url(../img/menu.jpg);
149  position: relative;
150
151}
152
153
154
155#menu {
156  margin-top: 20px;
157}
158
159#about ul {
160  display: flex;
161  justify-content: space-between;
162  flex-wrap: wrap;
163}
164

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

m.ts10806

2021/07/25 23:57

＃ ↑元のサイトのコード？とやら全角ですがこれは？

mo-n

2021/07/26 00:02

ご連絡ありがとうございます。元のサイトのコードは、参考として載せてみました。（模写練習用のサイトなので、ソースコードが掲載されています）このコードは、stylesheetへは貼り付けしていませんが、同じように実際入力を行っています。

mo-n

2021/07/26 00:05 編集

すみません、、頂いた質問を理解していませんでした。「＃ ↑元のサイトのコード？とやら全角ですがこれは？」「＃」は半角入力すると、質問入力画面で、マークアップ機能で大文字になってしまうので、全角で記入しています。「id」だから「#」の入力のようです。

37458

2021/07/26 00:16

liの大きさを固定していないためではないでしょうか？意図を汲み取れているか自信はないですが。。。

miyabi_pudding

2021/07/26 01:01

> 「＃」は半角入力すると、質問入力画面で、マークアップ機能で大文字になってしまう CSSも、HTML同様、コードブロックを使えば解決します。質問は修正可能なので、お願いします。コードブロックも、複数配置可能です。

mo-n

2021/07/26 01:57

ご連絡ありがとうございます。元のコード欄、追加と訂正しました。 li にwidth５０％入れても、横並びになりませんでした。。。

m.ts10806

2021/07/26 02:08

マークダウンのcodeを使えば他のマークダウンの機能は無視できます。赤の他人ゆえ、提示されたものが全てなので、半端な加工は見ている人を混乱させます。

m.ts10806

2021/07/26 04:35

せめて直しておいてほしい

mo-n

2021/07/26 04:59

大変失礼いたしました。恐れ入ります、マークダウンのコードブロックはどのように入力するのでしょうか。 https://teratail.com/help#about-markdown　ヘルプ確認しましたが、該当のコードが探せませんでしたので教えていただけますと幸いです。

m.ts10806

2021/07/26 05:03

コードはご自身のものです。投稿の際に考慮するもの。すでにご自身の質問に「該当のソースコード」としてHTMLとCSSに対し適応されています。同じようにしてください。

mo-n

2021/07/26 05:51

質問訂正いたしました。たいへん失礼いたしました。次回より気をつけます。

m.ts10806

2021/07/26 05:53

失礼…というより配慮の問題と思います。見るのは例外なく赤の他人ですから。本当にそう書いてあるのか、間違えたのか、加工したのか　誰にもわかりません

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

回答2件

liの幅を指定していいないのが原因ですね。
ブロックレベル要素ですので指定しないと100%の幅になります。

下記のように設定すれば2列表示になります。

css
1#about ul li {
2  width: 50%;
3}

ただし表示順は画像のようにはならないので orderで調整は必要でしょう。

投稿2021/07/26 00:56

hatena19

総合スコア33795

mo-n

2021/07/26 02:00

ご回答ありがとうございます。 li に「width50％」入れても、横並びになりませんでした。入れ方の間違いでしょうか。ディベロッパー見ると、反映はしておりました。

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

ベストアンサー

#about ulの下に下記を追加してください。

軽く解説するとdisplay: flex;すると子要素は100%になろうとするので2カラムなら50%で制限しています。
あとはword-breakで折り返しをしてあげれば2x2の形は完成です。

CSS
1#about ul {
2  ...
3}
4
5#about ul li {
6  width: 50%;
7  word-break: break-word;
8}

表現したい順番はorderで表示順を指定する方法があります。

あと条件付きですが、li要素の高さが決まっているのであれば縦並びにして高さを指定すればorderでなくても表現できます。

CSS
1#about ul {
2  ...
3  flex-direction: column; // 子要素を縦並びにする
4  height: 400px;
5}
6
7#about ul li {
8  width: 50%;
9  word-break: break-word;
10  height: 200px;
11}