How to display php code inline using flexbox?

Question

PHP

I can’t display items in a line with transfer to another,
I write code

<?php foreach ($latestProducts as $product): ?> 
               <div class="container-flex"> 
                <div class="item"> 


                    <h2><?php echo $product['id'];?></h2> 
                    <p> 
                        <a href="/product/<?php echo $product['id'];?>"> 
                        <?php echo $product['name'];?> 
                        </a> 
                    </p> 
                    <a href="#"">Посмотреть</a> 
                </div>
            <?php endforeach;?> 
        </div>

and

.container-flex {
min-height: 400px;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
align-content: stretch;
}

.item {
flex: 0 0 0;
margin: 5px;
}

gives such a
clue I have no idea what the error is.

Answer 1

Move flex container outside the loop

<div class="container-flex">
    <?php foreach ($latestProducts as $product): ?>
    <div class="item">
        <h2>
            <?php echo $product['id'];?>
        </h2>
        <p>
            <a href="/product/<?php echo $product['id'];?>">
                <?php echo $product['name'];?>
            </a>
        </p>
        <a href="#">Посмотреть</a> 
    </div>
    <?php endforeach; ?> 
</div>