Align boxes with flexbox and center them 2 by 2 - html

Question

I almost finish my website but I have one more issue,
At 745px the filter boxe is looking wrong.
I would like to have it like this
#media screen and (max-width: 768px) {
.bloc-filtres {
flex-direction: column;
}
.bloc-filtres ul {
display: flex;
gap: 1rem;
}
}
<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>

Answer 1

Just add a few lines to your CSS rule:
#media screen and (max-width: 768px)
.bloc-filtres ul {
display: flex;
gap: 1rem;
max-width: 70%;
margin: 0 auto;
}

Answer 2

Flexbox is great! But in this case i would prefer gridsystem. Why? Because you have already a fix structure and dont need the advantages from flexsystem (flex!). Below you can see a grid example.
.listing {
max-width: 768px;
width:100%;
margin: 0 auto;
overflow:hidden;
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.listing div {
background-color: yellow;
}
<div class="listing">
<div>Box A</div>
<div>Box B</div>
<div>Box C</div>
<div>Box D</div>
</div>