使用 Flexbox 水平和垂直循环显示 PHP

Question

这里有点问题。可以使用一些洞察力。我正在向我网站的访问者显示用户创建的事件。我正在使用 while 循环来显示尚未通过的所有内容。我的目标是显示两个彼此相邻的独立事件，然后在其下方显示另外两个事件，依此类推。目前我正在使用 flex box css 属性来实现这一点，但它只是垂直显示输出而不是我想要的方式，这意味着它每行只放置一个事件。这是我当前用于显示事件的输出。

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;
    }

如您所见，我在容器内使用 flex 属性，该容器包含每个单独的框，每个框包含每个事件。我将 flex direction 设置为 row 因为我希望它水平显示，然后在每行的空间用完后转到下一行。

我尝试了一些东西。我尝试切换到 css 列计数属性，但没有得到我期望的结果。老实说，我可能没有对那个属性进行足够的调整，但我对 flex box 属性很感兴趣。我还尝试将 flex 方向设置为列，还尝试将内联块显示属性添加到假设在每个事件的 while 循环中重复的框。我在网上发现这个与我的问题有点相似，但又不完全相同。一个使用 javascript，但这显然也可以用 php 以某种方式完成。我还发现了几篇文章谈论使用 flexbox 将内容居中，这不是这里的目标。

Answer 1

尝试将您的 .filter-wrap div 元素移动到 while() {} 循环之外。

您当前的编码：

while() {
  echo '<div class="filter-wrap">';
    echo '<div id="filter-boxes">';
      // content goes here...
    echo '</div>';
  echo '</div>';
}

将导致以下结构，其中每个 .filter-wrap 仅包含一个孩子 .filter-boxes，这将始终导致垂直呈现：

<div class="filter-wrap">
  <div id="filter-boxes"> content </div>
</div>
<div class="filter-wrap">
  <div id="filter-boxes"> content </div>
</div>
<div class="filter-wrap">
  <div id="filter-boxes"> content </div>
</div>

对于水平展示，正确的结构应该是一个.filter-wrap由多个.filter-boxes孩子组成：

<div class="filter-wrap">
  <div id="filter-boxes"> content </div>
  <div id="filter-boxes"> content </div>
  <div id="filter-boxes"> content </div>
</div>

因此您可以尝试将编码更改为：

echo '<div class="filter-wrap">';

while() {
  echo '<div id="filter-boxes">';
    // content goes here...
  echo '</div>';
}

echo '</div>';

向您演示编码逻辑结果的片段。它在 JS 中，但你只需要在你的 PHP 中应用它

希望对您有所帮助，祝您编码愉快！

var result_1 = document.getElementById('result_1');
var result_2 = document.getElementById('result_2');

var content_1 = '';
var content_2 = '';

content_2 = '<div class="filter-wrap">';

for (var i = 1; i <= 5; i++)
{
  // result 1
  content_1 += '<div class="filter-wrap"> <div class="filter-boxes">content ' + i + '</div> </div>';
  
  // result 2
  content_2 += '<div class="filter-boxes">content ' + i + '</div>';
}

content_2 += '</div>';

result_1.insertAdjacentHTML('beforeend', content_1);
result_2.insertAdjacentHTML('beforeend', content_2);

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

.filter-boxes {
  border: 2px solid #999;
  text-align: center;
  width: 50%;
  height: 50px;
  
  /* for two columns display */
  max-width: 49%;
}

#result_1,
#result_2 {
  background-color: lightgray;
  border: 1px dashed black;
  margin: 3px;
}

result 1
<div id="result_1"></div>

result 2
<div id="result_2"></div>