cssが反映されない理由は？

HTML CSS独学で勉強中です。
疑問点があったため質問です。

flexをつかってレジポンシブデザイン仕様にています
・子要素を上から下に並べる
・中央に寄せる

HTML
1 <body>
2    <ul class="flex-list">
3      <li class="li1">item1</li>
4      <li class="li2">item2</li>
5      <li class="li3">item3</li>
6      <li class="li4">item4</li>
7    </ul>
8  </body>

CSS
1ul {
2  list-style: none;
3  margin: 0px;
4  padding: 60px 0px;
5  text-align: center;
6}
7li {
8  color: white;
9  height: 80px;
10  line-height: 80px;
11}
12.li1 {
13  background-color: #ffc562;
14}
15.li2 {
16  background-color: #a0c3f7;
17}
18.li3 {
19  background-color: #ff8db3;
20}
21.li4 {
22  background-color: #88e7ce;
23}
24
25.flex-list {
26  display: flex;
27}
28.flex-list li {
29  flex: auto;
30}
31
32**/* スマホ向けレイアウト */
33@media (max-width:670px) {
34  .flex-list{
35    flex-direction: column;    
36  }
37  .flex-list li{
38    margin: 0 auto;
39}
40**

中央に寄せる際margin:0 auto;を .flex-list liに指定するとcssが反映されるのに対して.flex-listにmargin:0 auto;を指定しても反映されません。
class属性で挟んでいるので問題ないと思うのですがなぜ反映されないのでしょうか。

完成されるのはただの□が縦に並んだものです。
Progateというオンラインツールを使用しています。

m.ts10806

2020/05/16 12:55

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

m.ts10806

2020/05/16 13:01

＞class属性で挟んでいるので問題ないと思うのですがもっと見た目に明らかな指定をした方が良いかと思います。文字大きくしてみるとか色とか。これで問題切り分けが出来ます

ooaai

2020/05/16 13:20

progateというサイトは見本に沿って自分で考えて記述するのですが、そこで記述されていた見本の答え(例)と違い疑問に思ったため質問しました。問題が無いならきっと何かの不備だと思います！一般的にはどちらを指定することが多いのでしょうか？人それぞれ？？

kei344

2020/05/16 13:27

CSSは全体を載せてください。

kei344

2020/05/16 15:01

https://jsfiddle.net/h17zgaxt/ 「子要素を上から下に並べる」が「縦に並べる」ということなら問題なくできていませんか？

ooaai

2020/05/16 15:09

問題なくできています。.flex-list liにmarginを指定すると画面中央になるのに、.flex-listにmarginを指定すると反映されないのはなぜかを知りたかったんです..

ooaai

2020/05/16 15:10

今URL拝見しました。見本は文字も切れていない横長の長方形です

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

回答2件

IE11にも対応する場合、width: 100%;をliに指定してください。
あと「}」が1つ足りないので関係があるかもしれません。

CSS
1/* スマホ向けレイアウト */
2@media (max-width:670px) {
3  .flex-list{
4    flex-direction: column;
5  }
6  .flex-list li{
7    margin: 0 auto;
8    width: 100%; /* 追加 */
9  } /* 追加 */
10}

投稿2020/05/17 22:28

new1ro

総合スコア4528

ベストアンサー

.flex-list に margin:0 auto; を指定すると同時に width を指定していからではないでしょうか？width: max-content; などと指定してみてはいかがでしょうか？

css
1  .flex-list{
2    display: flex;
3    flex-direction: column;
4    margin: 0 auto;
5    width: max-content;
6  }

投稿2020/05/16 13:32

Yasumichi

総合スコア1773

ooaai

2020/05/16 15:04

真ん中には寄りましたが幅がめちゃくちゃ細くなってしまいました。widthを指定していないとありますが、@media()内に記述されてるmax-width:670pxは指定したことにはなりませんか？？ CSS全体を載せなおしたのでもしよければ再度確認お願いします

Yasumichi

2020/05/16 15:21 編集

あくまで max-width:670px は最大幅が指定されているだけで width を指定するのとは違います。 width: max-content; だと内容の一番幅が大きいのに合わせるので width: 600px とか、表示させたい幅を直接、指定してください。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

cssが反映されない理由は？

関連した質問