如何在PHP文件中正确设置MySQL数据的Flexbox响应式样式？

问题原因 #

你在循环渲染数据库数据时，错误地将Flex容器.containerAdmin放在了while循环内部。这导致每一条数据库记录都被包裹在独立的Flex容器中，每个容器仅包含一个.box4test元素，自然只能垂直单列排列。而测试模块的布局正常，是因为所有.box4test都处于同一个Flex容器下，Flexbox可以正常控制它们的自适应换行。

解决方案 #

将Flex容器div.containerAdmin移至while循环外部，让所有从数据库取出的.box4test元素共享同一个Flex容器，这样Flexbox就能正常管理它们的排列和换行逻辑。

修改后的代码示例 #

PHP代码

// 数据库数据展示部分
?>
<div class="containerAdmin">
<?php
while ($rows = $result->fetch_assoc()) {
    ?>
        <div class="box4test">
            <p>test</p>
            <h3><?php echo $rows['nom']; ?></h3>
            <?php echo " | category: "; ?>
            <?php echo $rows['category']; ?>
            <button> x </button>
        </div>
    <?php
}
?>
</div>

<!-- 布局测试部分 -->
<div class="containerAdmin">
    <div class="box4test">
        <p>1 </p>            
    </div>
    <div class="box4test">
        <p>2 </p>            
    </div>
    <div class="box4test">
        <p>3 </p>            
    </div>
    <div class="box4test">
        <p>4</p>            
    </div>
</div>

CSS代码

.containerAdmin {
    display: flex;
    flex-wrap: wrap;
}
.box4test {
    background-color: plum;
    margin: 10px;
    width: 300px;
    height: 50%;
}

说明 #

修改后，所有数据库返回的条目都会作为同一个Flex容器的子元素，Flexbox会根据屏幕宽度自动调整每行显示的数量，实现和测试模块一致的自适应布局效果。同时建议将内联样式移至CSS文件中，便于统一维护。

内容的提问来源于stack exchange，提问作者user19983842