如何用Flexbox实现PHP While循环事件的每行两列横向排列？

用PHP While循环读取数据库中未过期的用户事件，想实现每行两个事件的横向排列，但当前Flexbox布局只能垂直每行显示一个事件。试过column-count、修改flex-direction、inline-block都没效果，求Flexbox方案。

原PHP代码：

include 'db_connect.php';
        $event_type = $_POST['event_type'];
        $state = $_POST['state'];
        $current_date = date("Y-m-d");
        $sql = "SELECT * FROM events WHERE event_type LIKE '%".$event_type."%' AND state LIKE '%".$state."%' AND end_date > '$current_date' ORDER By end_date ASC";
        $result = mysqli_query($conn, $sql);
        if (isset($_POST['search-events']) && !empty($event_type) && !empty($state)) {
            while($row = mysqli_fetch_array($result)) {
                $event_name= $row['event_name'];
                $image = $row['image'];
                $start_date = $row['start_date'];
                $end_date = $row['end_date'];
                $start_time = $row['start_time'];
                $end_time = $row['end_time'];
                $street = $row['street'];
                $city = $row['city'];
                $state = $row['state'];
                $zip_code = $row['zip_code'];
                $id = $row['event_id'];
                echo '<div class="filter-wrap">';
                    echo '<div id="filter-boxes">';
                        echo '<div id="list_image"><img src="'.$image.'"></div>';
                        echo '<div id="list_name">'.$event_name.'</div>';
                        echo '<div id="list_date">'.$start_date. ' - ' .$end_date. '</div>';
                        echo '<div id="list_time">' .$start_time. ' - ' .$end_time. '</div>';
                        echo '<div id="list_location">'.$street.''.$city.''.$state.''.$zip_code.'</div>';
                    echo '</div>';
                echo '</div>';
        }
    }

原CSS代码：

.filter-wrap {
    display: flex;
    flex-direction: row;
    padding: 10px;
    justify-content: center;
    align-items: center;
}

#filter-boxes {
    border: 2px solid #999;
    text-align: center;
    width: 50%;
    height: 150px;
    }

核心问题是你把每个事件都放在了独立的.filter-wrap容器中，每个容器单独触发Flex布局，自然每行只能显示一个事件。正确做法是把所有事件盒子放在同一个Flex容器里，让容器内的子元素自动换行。

1. 修改PHP代码 #

• 将.filter-wrap容器移到While循环外面，作为所有事件的父容器
• 把事件盒子的id="filter-boxes"改成class="filter-boxes"（ID不能重复，每个事件盒子都是独立元素，必须用class）
• 内部的list_image、list_name等也建议改成class，避免ID重复问题

修改后的PHP代码：

include 'db_connect.php';
$event_type = $_POST['event_type'];
$state = $_POST['state'];
$current_date = date("Y-m-d");
$sql = "SELECT * FROM events WHERE event_type LIKE '%".$event_type."%' AND state LIKE '%".$state."%' AND end_date > '$current_date' ORDER By end_date ASC";
$result = mysqli_query($conn, $sql);

if (isset($_POST['search-events']) && !empty($event_type) && !empty($state)) {
    // 把flex容器放在循环外面
    echo '<div class="filter-wrap">';
    while($row = mysqli_fetch_array($result)) {
        $event_name= $row['event_name'];
        $image = $row['image'];
        $start_date = $row['start_date'];
        $end_date = $row['end_date'];
        $start_time = $row['start_time'];
        $end_time = $row['end_time'];
        $street = $row['street'];
        $city = $row['city'];
        $state = $row['state'];
        $zip_code = $row['zip_code'];
        $id = $row['event_id'];
        
        // 事件盒子用class，不要用id
        echo '<div class="filter-boxes">';
            echo '<div class="list_image"><img src="'.$image.'"></div>';
            echo '<div class="list_name">'.$event_name.'</div>';
            echo '<div class="list_date">'.$start_date. ' - ' .$end_date. '</div>';
            echo '<div class="list_time">' .$start_time. ' - ' .$end_time. '</div>';
            echo '<div class="list_location">'.$street.' '.$city.' '.$state.' '.$zip_code.'</div>';
        echo '</div>';
    }
    echo '</div>';
}

2. 修改CSS代码 #

• 给.filter-wrap添加flex-wrap: wrap，让子元素在空间不足时自动换行
• 给.filter-boxes设置合适的宽度（比如flex: 0 0 45%，留margin空间），并调整padding、margin避免元素挤在一起
• 移除.filter-wrap里的align-items: center（如果不需要垂直居中），或者保留根据需求调整

修改后的CSS代码：

.filter-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* 关键：自动换行 */
    padding: 10px;
    justify-content: space-between; /* 让元素左右分布，中间留空 */
    gap: 20px; /* 可选：设置元素之间的间距，替代margin */
}

.filter-boxes {
    border: 2px solid #999;
    text-align: center;
    flex: 0 0 calc(50% - 10px); /* 每行两个，减去gap的一半 */
    height: 150px;
    padding: 10px;
    box-sizing: border-box; /* 让padding不影响宽度计算 */
}

/* 可选：调整内部元素样式，让布局更美观 */
.list_image img {
    max-width: 100%;
    max-height: 80px;
    object-fit: cover;
}
.list_name {
    font-weight: bold;
    margin: 5px 0;
}

这样修改后，Flex容器会自动把事件盒子每行排列两个，空间不足时自动换行，实现预期效果。

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