プロゲートHTMLCSS道場コース中級編 3,レッスン一覧部分を作ろうをfloatではなくdisplay:flex;でクリアしたいのですができません。初心者ですみません。

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

ここに質問の内容を詳しく書いてください。
プロゲートのHTMLCSS道場コース中級編で詰まってます。

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

道場コース３のレッスン一覧を作ろうがクリアできません。
回答にあるfloatでクリアするのではなく
display:flex;を使ってクリアしたいのですがクリアできません。
分かる方いたらヘルプお願いします。

エラーメッセージ

該当のソースコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Progate</title>
  <!-- ここでFont Awesomeを読み込んでください -->
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
  <!-- ここにコードを書いていきましょう -->
  <header class="header">
    <div class="logo">
      <img src="https://prog-8.com/images/html/advanced/main_logo.png" alt="" />
    </div>
    <a class="login" href="#">ログイン</a>
  </header>
  
  
  
  <main>
    
    <div class="top-main">
      <h1>LEARN TO CODE.</h1>
      <h1>LEARN TO BE CREATIVE.</h1>
      <p>Progateはオンラインプログラミング学習サービスです。</p>
      <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。/p>
    
    <div class="btn new">新規登録はこちら</div>
    <p class="or">or</p>
    
    <div class="ft">
    <div class="btn facebook"><span class="fa fa-facebook"></span>Fackbookで登録</div>
    <div class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</div>  
    </div>
    
    </div>
    
    <div class="content">
      <h2>Learn Where to Get Started!</h2>
      
     <div class="reinbo">
       
        <div class="images">
        <img src="https://prog-8.com/images/html/advanced/html.png" alt="" />
        <h3>HTMLCSS</h3>
        <p>ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
      </div>
      
      <div class="images">
        <img src="https://prog-8.com/images/html/advanced/jQuery.png" alt="" />
        <h3>jQurey</h3>
        <p>素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
      </div>
      
      <div class="images">
        <img src="https://prog-8.com/images/html/advanced/ruby.png" alt="" />
        <h3>Ruby</h3>
        <p>オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
      </div>
      
      <div class="images">
        <img src="https://prog-8.com/images/html/advanced/php.png" alt="" />
        <h3>PHP</h3>
        <p>HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
      </div>
      
     </div>
      
      
    </div>
    
  </main>
  
  
</body>
</html>




/* CSSのリセット（消さないでください） */
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p, div {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

/* ここからCSSを書いていきましょう */
.header {
  background-color:rgba(34, 49, 52, 0.9);
  position: fixed;
  width:100%;
  display:flex;
  justify-content:space-between;
  
  position:fixed;
  top:0;
  z-index:10;
}
.logo img {
  width:124px;
  margin-top:20px;
  margin-left:20px;
}
.login {
  background-color:rgba(255, 255, 255, 0.3);
  color:white;
  padding:0 25px;
  line-height:65px;
  margin-right:40px;
}
.login:hover{
  transition:all 0.5s;
  background-color:rgba(255, 255, 255, 0.5);
}
/*--------------------------------------------------------
メイン------------------------------------------*/
.top-main {
  padding-top:180px;
  background-image:url(https://prog-8.com/images/html/advanced/top.png);
  background-size:cover;
  text-align:center;
  color:white;
  
}
.top-main h1 {
  font-size:45px;
  letter-spacing:5px;
  opacity: 0.7
}
.top-main p {
  opacity: 0.7
}
.ft {
  display:flex;
  justify-content:center;
  padding-bottom:100px;
}
.btn {
  padding:8px 24px;
  border-radius:4px;
  cursor: pointer;
  opacity: 0.8
}
.btn:hover{
  opacity: 1
}
.fa {
  margin-right:5px;
}
.new {
  background-color:#239b76;
  margin-top:30px;
  display: inline-block;
}
.or {
  margin-top:15px;
  margin-bottom:15px;
}
.facebook {
  margin-right:10px;
  background-color:#3b5998;
}
.twitter {
  background-color:#55acee;
}
.content {
 padding-top:80px;
 padding-bottom:20px;
 text-align:center;
 background-color:#f7f7f7;
}
.content h2 {
  font-weight: normal
}
.reinbo {
  display:flex;
  margin-top:50px;
 
  color:white;
}
.images {
  position: relative;
  width:25%;
}
.images h3 {
  position: absolute;
  top:85px;
  left:110px;
}
.images p {
  font-size:13px;
  color:#b3aeb5;
  margin-top:15px;
  width:80%;
  margin-left:30px;
}

試したこと

ここに問題に対して試したことを記載してください。

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

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

maisumakun

2021/10/09 14:10

クリアしたかどうかはどのように判断されるのですか？

juntaro_juntaro

2021/10/09 14:37

反応ありがとうございます！わかりやすく画像を入れてみました。画像の右側が答えになります。

juntaro_juntaro

2021/10/09 14:39

緑　黄色　赤　青の画像をdlsplay:flexで調整してるのですが画像のようになりません。

juntaro_juntaro

2021/10/09 14:42

.images { width:25%; } にすれば画像のようになると思ったんですがなりませんでした。

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

回答1件

ベストアンサー

やってみました。

HTMLでの大きな変更点としては、.reinboの中のタグ構造を変更したところです。
h3の包含する範囲を変更してあげることで、flexが使いやすくなったのではないかと思います。
また、imgタグで画像を入れているようでしたが、要素幅の操作がしづらかったのでbackground-imageに変更しています。

これでも不正解と言われるようなら、.imagesのwidth, .images>h3のjustify-contentをspace-betweenにしてみるなど調整してみるといいかもしれません。

flexboxのチートシートを貼っておきます。ご参考になるといいのですが…
https://web-cheatsheet.com/css-flexbox

HTML
1<div class="reinbo">
2<div class="images">
3<h3 class="html">HTML/CSS</h3>
4<p>ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
5</div>
6
7<div class="images">
8<h3 class="jquery">jQuery</h3>
9<p>素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
10</div>
11	
12<div class="images">
13<h3 class="ruby">Ruby</h3>
14<p>オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
15</div>
16
17<div class="images">
18<h3 class="php">PHP</h3>
19<p>HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
20</div>
21</div>

CSS
1.reinbo {
2  display:flex;
3  justify-content: center;
4  margin-top:50px;
5  color: white;
6}
7
8.images {
9  // position: relative;
10  width: 20%;
11}
12
13.images > h3 {
14//   position: absolute;
15//   top:85px;
16//   left:110px;
17  display: flex;
18  justify-content: center;
19  align-items: center;
20  height: 200px;
21  background-repeat: no-repeat;
22  background-position: 50% 0%;
23}
24
25.images > .html {
26  background-image: url(https://prog-8.com/images/html/advanced/html.png);
27}
28
29.images > .jquery{
30  background-image: url(https://prog-8.com/images/html/advanced/jQuery.png);
31}
32
33.images > .ruby{
34  background-image: url(https://prog-8.com/images/html/advanced/ruby.png);
35}
36
37.images > .php {
38  background-image: url(https://prog-8.com/images/html/advanced/php.png);
39}
40
41.images p {
42  font-size:13px;
43  color:#b3aeb5;
44  margin-top:15px;
45  // width:80%;
46  // margin-left:30px;
47  padding: 1rem;
48}