使用Flexbox实现筛选框2×2居中对齐 适配745px屏幕

问题说明 #

网站开发接近尾声，在屏幕宽度为745px时，筛选框显示异常，需要将4个筛选项调整为2×2居中排列的效果。当前代码实现如下：

原HTML代码 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="bloc-filtres">
  <p id="titre-filtre">Filtres</p>
  
  <ul>
    <li class="filtres">
      <i class="fa-solid fa-money-bill-wave"></i>
      <input type="checkbox" id="eco" name="filtre-possible" value="eco" />
      <label for="eco">Économique</label>
    </li>
    <li class="filtres">
      <i class="fa-solid fa-person"></i>
      <input type="checkbox" id="famille" name="filtre-possible" value="famille" />
      <label for="famille">Familial</label>
    </li>
    <li class="filtres">
      <i class="fa-solid fa-heart"></i>
      <input type="checkbox" id="romantique" name="filtre-possible" value="romantique" />
      <label for="romantique">Romantique</label>
    </li>
    <li class="filtres">
      <i class="fa-solid fa-dog"></i>
      <input type="checkbox" id="animaux" name="filtre-possible" value="animaux" />
      <label for="animaux">Animaux autorisés</label>
    </li>
  </ul>
</div>

原CSS代码 #

@media screen and (max-width: 768px) {
  .bloc-filtres {
    flex-direction: column;
  }
  .bloc-filtres ul {
    display: flex;
    gap: 1rem;
  }
}

修复方案 #

修改媒体查询内的CSS代码，通过Grid布局实现2×2居中效果：

@media screen and (max-width: 768px) {
  /* 让筛选模块整体居中 */
  .bloc-filtres {
    flex-direction: column;
    align-items: center;
  }
  /* 使用Grid实现2列布局，自动换行 */
  .bloc-filtres ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    justify-items: center;
    width: 100%;
    max-width: 400px; /* 可选：限制最大宽度避免过宽 */
  }
}

关键改动说明 #

• 给.bloc-filtres添加align-items: center，让标题和筛选列表整体水平居中
• 将ul的布局从Flex改为Grid，grid-template-columns: repeat(2, 1fr)直接定义2列，每列宽度均等
• justify-items: center确保每个筛选项在网格单元内居中显示
• 可选添加max-width到ul，避免屏幕过宽时筛选项间距过大

如果需要精确在745px时触发布局，可将媒体查询的max-width改为745px：

@media screen and (max-width: 745px) {
  /* 同上样式 */
}

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