I am currently working on developing a product catalog using PHP. Below is the HTML flex-container code:
<div class="products">
<?php
echo file_get_contents("http://192.168.64.2/CodeWay/Pages/product.php");
?>
</div>
The PHP code retrieves all the available courses from the database and displays them in the container as follows:
require_once '../Backend/Config.php';
$query = "SELECT * FROM `products` ORDER BY `product_id`";
$result = $link->query($query);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<div class='product-flex-item'>";
echo $row["product_name"];
echo "<div> <br>";
}
}
However, after echoing the flex-items, the flex-container appears like this:
<div class="products">
<div class='product-flex-item'>php beginner course<div> <br><div class='product-flex-item'>cascca<div> <br></div>
Unfortunately, the display is not correct. The second item appears smaller than the first one, and attempting to set justify content to space between fails to make any changes.