flexで要素を横並びにしたいです。

flexを利用して、articleのangle20_grayを2列の横並びにしたいのですが、改行されてしまいます。
どのように修正したら良いでしょうか。

ご教示頂けますと幸いです。

HTML
1            <article class="container">
2                <h3>最新機種</h3>
3                <div　class="flex-wrap">
4                  <article class="angle20_gray">
5                        <img src="img/pc01.jpg" class="main" alt="機種名が入ります">
6                        <h4>機種名が入ります</h4>
7                        <p>テキストが入ります</p>
8                        <button type="button" class="details">製品の詳細を見る<img src="./img/arrow.png"></button>
9                    </article>
10                    <article class="angle20_gray">
11                        <img src="img/pc02.jpg"  class="main" alt="機種名が入ります">
12                        <h4>機種名が入ります</h4>
13                        <p>テキストが入ります</p>
14                        <button type="button" class="details">製品の詳細を見る<img src="./img/arrow.png"></button>
15                        </article>
16                    <article class="angle20_gray">
17                        <img src="img/pc01.jpg"  class="main" alt="機種名が入ります">
18                        <h4>機種名が入ります</h4>
19                        <p>テキストが入ります</p>
20                        <button type="button" class="details">製品の詳細を見る<img src="./img/arrow.png"></button>
21                    </article>
22                    <article class="angle20_gray">
23                        <img src="img/pc02.jpg"  class="main" alt="機種名が入ります">
24                        <h4>機種名が入ります</h4>
25                        <p>テキストが入ります</p>
26                        <button type="button" class="details">製品の詳細を見る<img src="./img/arrow.png"></button>
27                    </article>
28            </article>
29

CSS
1.container{
2    max-width: 1140px;
3    margin: 0 auto 100px auto;
4}
5.flex-wrap{
6    display:flex;
7    justify-content: space-between;
8}
9.angle20_gray{
10    width: 48%;
11    height: 720px;
12    background-color:#ececec;
13    border-radius: 20px;
14    box-shadow: 5px 5px 5px 0 rgba(0,0,0,0,3);
15    text-align: center;
16    padding: 20px 20px 30px 20px;
17}

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

回答1件

ベストアンサー

複数の理由により横並びにならない状態となっています。

html
1<div　class="flex-wrap">

divとclassの間に全角スペースが入っています。
半角スペースにしましょう。

この時点で横には並んだが、すべて横並びになったと思われます。
felxの折り返し設定がされていないためです。

css
1.flex-wrap{
2    display:flex;
3    justify-content: space-between;
4}

ここに flex-wrap:wrap;
を追加しましょう。
参考：https://developer.mozilla.org/ja/docs/Web/CSS/flex-wrap

おそらくまだ横並びです。
開発者ツールなどで確認するとわかりますが
大元の横幅1140pxに対して48%の横幅をとっているので547pxこれに左右paddingが加算されて587pxになります。
587px*2=1174pxで1140pxを超えるために改行されてしまいます。
そのためwidthのサイズを小さくするか、paddingも横幅に含めてしまいましょう。

css
1.angle20_gray{
2    width: 48%;
3    height: 720px;
4    background-color:#ececec;
5    border-radius: 20px;
6    box-shadow: 5px 5px 5px 0 rgba(0,0,0,0,3);
7    text-align: center;
8    padding: 20px 20px 30px 20px;
9
10}