Progate初級道場コース　フッターのリストを縦に並べる方法

### 前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

Progate初級道場コースのフッターが上手く作れません。
下が見本で、上が私のものです。
リストを右揃えにするところまでは出来たのですが、縦に並べることが出来ず困っています。

該当のソースコード

CSS
1html, body,
2ul, ol, li,
3h1, h2, h3, h4, h5, h6, p,
4form, input, div {
5  margin: 0;
6  padding: 0;
7}
8
9body {
10  font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
11  
12}
13
14.header {
15  height: 90px;
16  background-color:#26d0c9;}
17li {
18  list-style: none;
19  float: left;
20  padding: 33px 20px;
21  color: white;
22}
23
24/* ここからCSSを記述してください */
25.header-logo {
26  float: left;
27  font-size: 36px;
28  padding: 20px 40px;
29  color: white;
30}
31.copy-countainer {
32  padding: 100px 80px;
33}
34.copy-countainer h1 {
35  font-size: 140px;
36}
37.copy-countainer span {
38  color:#ff4a4a;
39}
40.copy-countainer h2 {
41  font-size:60px;
42}
43.section-title {
44  border-bottom: 2px solid #dee7ec;
45  font-size:28px;
46  padding-bottom:15px;
47  margin-bottom:50px;
48}
49.contents {
50  
51  margin-left:80px;
52  height:500px;
53}
54.contents-item {
55  
56  float:left;
57  margin-right:40px ;
58}
59.contents-item p {
60  margin-top:30px;
61  font-size:24px;
62  
63}
64.contact-form {
65  margin-left:80px;
66  margin-right:80px;
67  margin-top:100px;
68}
69.h3 {
70  font-size:28px;
71  border-bottom:#dee7ec;
72}
73input {
74  border-color:#dee7ec;
75  padding:20px;
76  width:400px;
77  margin-bottom:30px;
78}
79textarea {
80  border-color:#dee7ec;
81  padding:20px;
82  width:400px;
83  margin-bottom:30px;
84}
85p {
86  margin-bottom:10px;
87}
88.contact-submit {
89  font-size:18px;
90  padding:20px;
91  background-color:#dee7ec;
92  color:#889eab;
93}
94.footer {            
95   background-color: #2f5167;            
96   color: #fff;            
97   height: 120px;            
98   padding: 40px;    
99   margin-top:112px;
100     }            
101                                
102  .footer-logo {            
103     float: left;            
104     font-size: 32px;            
105                                 }            
106                                
107  .footer-list {
108    float: right;
109    display: flex;
110    flex-flow: column;
111}
112
113.footer-list li {
114    padding-bottom: 20px;
115}       
116
117
118                                
119  
120
121HTML
122<!DOCTYPE html>
123<html>
124  <head>
125    <meta charset="utf-8">
126    <title>Progate</title>
127    <link rel="stylesheet" href="stylesheet.css">
128  </head>
129  <body>
130    <!-- ここからHTMLを書き始めてください -->
131   <div class="header">
132    <div class="header-logo">Progate</div>
133     <div class="header-list">
134      <ul>
135        <li>プログラミングとは</li>
136        <li>学べるレッスン</li>
137        <li>お問い合わせ</li>
138      </ul>
139     </div>
140   </div>
141   <div class="copy-countainer">
142     <h1>HELLO WORLD<span>.</span></h1>
143     <h2>プログラミングの世界へようこそ</h2>
144     </div>
145    <div class="contents">
146      <h3 class="section-title">学べるレッスン</h3>
147      <div class="contents-item">
148        <img src="https://prog-8.com/shared/images/lesson/html/study/html.svg">
149        <p>HTML & CSS</p>
150      </div>
151      <div class="contents-item">
152        <img src="https://prog-8.com/shared/images/lesson/html/study/php.svg">
153        <p>PHP</p>
154      </div>
155      <div class="contents-item">
156        <img src="https://prog-8.com/shared/images/lesson/html/study/ruby.svg">
157        <p>Ruby</p>
158      </div>
159      <div class="contents-item">
160        <img src="https://prog-8.com/shared/images/lesson/html/study/swift.svg">
161        <p>Swift</p>
162      </div>
163    </div>
164    <div class="contact-form">
165      <h3 class="section-title">お問い合わせ</h3>
166       <p>メールアドレス (必須) </p>
167        <input>
168       <p>お問い合わせ内容 (必須) </p>
169        <textarea></textarea>
170       <p>※必須項目は必ずご入力ください</p>
171 <input class="contact-submit" type="submit" value="送信">
172 </div>
173 
174 <div class="footer">
175   <div class="footer-logo">Progate</div>
176    <div class="footer-list">
177      <ul>
178        <li>会社概要</li>
179        <li>採用</li>
180        <li>お問い合わせ</li>
181      </ul>
182    </div>
183    
184   </div>
185  </body>
186</html>

試したこと

自分なりに調べて、
display: flex;
flex-flow: column;　で縦に並べられるとの情報を見つけ、試してみたのですが反映されません。
プログラミング超初心者でわからないことだらけで困っています。
どなたか教えていただけませんでしょうか。

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

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

hatena19

2021/11/24 23:29

HTMLコードも提示してください。

yummyyummy

2021/11/25 00:09

HTMLコードも載せましたので、よろしくお願い致します。

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

回答1件

ベストアンサー

HTMLの提示がないので推測ですが、flexは横並びまたは縦並びさせたい親要素に設定するものですので、
下記でどうでしょう。

css
1.footer-list {
2    float: right;
3    display: flex;
4    flex-flow: column;
5}
6
7.footer-list li {
8    padding-bottom: 20px;
9}

投稿2021/11/24 23:33

編集2021/11/24 23:34

hatena19

総合スコア34107

yummyyummy

2021/11/25 00:11

ご回答ありがとうございますm(__)m HTMLコードも載せました。ご提案頂いたCSSコードに変更しても縦並びにすることが出来ないため、HTMLコードに問題があるのかと思います。再度アドバイスいただけますでしょうか。よろしくお願い致します。

hatena19

2021/11/25 00:14

提示のHTML、CSSで縦並びになっています。提示以外の部分に問題があると思われます。

yummyyummy

2021/11/25 00:36

提示以外の部分とは、例えばどんなところでしょうか、、、？超初心者で、、、すみません(>_<)

hatena19

2021/11/25 02:00

CSSのコードはすべて提示してますか。それがすべてなら縦並びになるはずです。

yummyyummy

2021/11/25 02:38

CSSコードを一部しか提示していなかったので、全て提示しました。ご指摘ありがとうございます。 CSSの他の部分に問題ありそうでしょうか。

hatena19

2021/11/25 06:53 編集

li要素の親は、.footer-list > ul ですので、下記でどうでしょう。 .footer-list { float: right; } .footer-list > ul { display: flex; flex-flow: column; } ただし、フッターからli要素がはみ出しますので、フッターの高さと、li要素の余白の設定は適宜調整してください。

yummyyummy

2021/11/28 03:11

提案して頂いたコードで数日間トライしたのですが、縦並びにすることは出来ても、フッターの下に謎の余白出来てしまい、また、リストの項目ごとの幅が広く、「お問い合わせ」がフッターの中に収まらないという状況です。。。

hatena19

2021/11/28 03:36

リストの上下マージンが大きく設定されているので、それを小さくすればいいでしょう。 Progateは横並びなどのレイアウトをfloatでするという10年古い手法で指導しています。ここで学習しても実践では役に立たないと個人的には思います。適当に切り上げて、別の学習サイトへ移行したほうがいいですよ。他にどこがいいかと聞かれても私は学習サイト自体利用したことがないので分かりませんが。

yummyyummy

2021/11/28 13:28

そうなのですね^_^; 知らなかったです。。。軽く１周だけして、他のサイトで勉強しようと思います！色々と教えていただき、ありがとうございました。

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