ラッパーが正しくコンテンツをインラインで表示しない

Question

私は学校のプロジェクトのために終了する必要がある私のウェブサイトに少し問題があります。私はPHPのコードをラッパーの中に入れています。インラインの魔法使いを表示しようとしていますが、コンテンツはちょうど小さくなり、スタックされません。 ラッパーの内容は繰り返され、空きスペースがなくなるまでラップを繰り返していきます。私はあなたが私の意味を理解してくれることを願って:)どんな助けでも大歓迎です。

HTML

<section class="wrapper"> 
<?php 
    foreach ($armbond as $entry) 
    { 
    echo "<div class='box'> " . "name: " . $entry[0] . "." . " " . "<br> inforamtion: " . $entry[2] . "." . '<br> <img src="' . $entry[1] . '" style="width:304p"' .'">'. " " . "<br> price: " . $entry[3] . "</div> "; 
    } 
?> 
</section>` 

CSS

.wrapper{ 
    display: flex; 
    flex-flow: row-wrap; 
} 

.box{ 
    background: silver; 
    margin:2px; 
    height: 150px; 
    width: 300px; 
}` 

Answer 1

使用flex-flow: row wrap;何row-wrapはありません。

読むよりここに：https://css-tricks.com/almanac/properties/f/flex-flow/

.wrapper{ 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 

 
.box{ 
 
    background: silver; 
 
    margin:2px; 
 
    height: auto; 
 
    width: 300px; 
 
}

<section class="wrapper"> 
 
    <div class='box'>name:zzzz 
 
    <br> inforamtion: xxxx 
 
    <br> <img src="https://dummyimage.com/300x100/000/fff" style="width:300px"> 
 
    <br> price:111111 
 
\t </div> 
 
    <div class='box'>name:zzzz 
 
    <br> inforamtion: xxxx 
 
    <br> <img src="https://dummyimage.com/300x100/000/fff" style="width:300px"> 
 
    <br> price:111111 
 
\t </div> 
 
    <div class='box'>name:zzzz 
 
    <br> inforamtion: xxxx 
 
    <br> <img src="https://dummyimage.com/300x100/000/fff" style="width:300px"> 
 
    <br> price:111111 
 
\t </div> 
 
    <div class='box'>name:zzzz 
 
    <br> inforamtion: xxxx 
 
    <br> <img src="https://dummyimage.com/300x100/000/fff" style="width:300px"> 
 
    <br> price:111111 
 
\t </div> 
 
</section>