cssのflexボックスがうまく機能しない

cssのフレックス機能を使って横並びにはできたのですが
画面の右端にきたら改行してほしいのですがそのまま横に並んでしまいます
cssの構造的には問題ないと思うのですが...
また横に3商品掲載したら改行するなども可能なのでしょうか?
よろしくお願いいたしますm

html
1
2        <?php
3
4            try{
5              
6                $stmt = $dbh->query('SELECT * FROM hagoli');
7                $stmt->execute();
8
9                foreach($stmt as $rec){
10
11                   $tittle = $rec["tittle"];
12                   
13                   $tittle = wordwrap($tittle,55,'<br>',true);
14          print '<div class="main-box">';
15                    print '<form  method="GET">';
16
17                    print '<figure class="gazo-box" >';
18
19                    print '<a href="./aguron/shop/hagoli/sales/details/details.php?id='.$rec["id"].'"><img class="image1" src="./asynchronous/registration/image/'.$rec["id"].'/'.$rec["image1"].'"></a>';
20                    print '<br>';
21                    print '<a href="./aguron/shop/hagoli/sales/details/details.php?id='.$rec["id"].'"><span class="ti">'.$tittle.'</span></a>'; 
22                    print '<br>';
23                    print '<a href="./aguron/shop/hagoli/sales/details/details.php?id='.$rec["id"].'"><span class="price">'.$rec["price"].'円</span></a>';
24                    print '</figure>';
25    
26                    print '</form>';
27     print '<div>';
28            }
29
30
31
32
33
34            }catch(PDOException $e){
35                print "只今メンテナンス中の為,ご迷惑をお掛けしております";
36                print "<br>";
37                die();
38            }
39
40
41        ?>
42
43
44</body>
45
46</html>

css
1.image1{
2        width: 250px;
3        height: 250px;
4        object-fit: cover; 
5
6}.ti{
7
8
9    
10}.price{
11
12
13
14
15
16}.rogin{
17
18
19margin-left: 1500px;
20margin-bottom: -150px;
21
22
23
24}.king{
25
26display: flex;
27flex-wrap: wrap;
28
29}.main-box{
30
31
32    display: flex;
33
34flex-direction: row;
35/* flex-wrap: wrap; */
36
37  
38
39
40
41
42
43}.gazo-box{
44
45display: flex;
46flex-direction: column;
47
48
49}body{
50
51    overflow-x: hidden;
52
53}

m.ts10806

2020/10/31 22:25

PHPタグなしにPHPのコードを投入するのは混乱のもとです。 HTML、cssをする人すべてがPHPをするわけではありません。 flexのことだけ聞きたいのなら、ブラウザに出力されたHTMLだけを提示してください。

nguyenseiji

2020/10/31 22:29

失礼いたしました php側にclassも追加しているので phpのタグも追加いたしました

Daregada

2020/10/31 22:55

> cssの構造的には問題ないと思うのですが... いいえ。提示されたコードは、main-boxクラスのdiv要素を列挙するものですが、HTMLファイルにはmain-boxクラスの外側の要素がありませんし、CSSファイルには、「main-boxクラスをどう並べるか」が示されていません。「display: flex;」は、それが書かれているセレクターの要素の**内容をflexレイアウトにする**ものです。main-boxクラスのdiv要素の内部や、その中にあるgazo-boxクラスのdiv要素の内部はflexレイアウトになりますが、このままではmain-boxクラスはflexレイアウトになりません。提示されている画像との齟齬があるので、おそらくはまだ実際のPHPファイルとは違うものを提示しているのでしょう。kingクラスがHTML側に出てこないし。