Как отцентровать Flex- блок с картинками в адаптивной верстке? Верстка проходит кросс-браузерность, но адаптивность нет
В браузерах все по центру. Много див`ов, опыта работы с флекс немного. А при подгоне под тот же pixel2 блок уходит влево(скриншот приложен)
///браузерный код///
.par-container{
display: flex;
align-items: center;
justify-content: center;
}
.flex-container {
display: flex;
width: 800px;
flex-wrap: wrap;
}
.part1 {
display: flex;
align-items: center;
justify-content: center;
}
.part2 {
display: flex;
align-items: center;
justify-content: center;
}
#per img {
display: flex;
align-items: center;
justify-content: center;
flex-basis: 250px;
height: 250px;
}
<div class="par-container">
<div class="flex-container">
<div class="part1">
<div id="per">
<img class="razmerf" src="images/ex1.jpg" alt="img">
</div>
<div id="per">
<img class="razmerf" src="images/ex2.jpg" alt="img">
</div>
<div id="per">
<img class="razmerf" src="images/ex3.jpg" alt="img">
</div>
</div>
<div class="part2">
<div id="per">
<img class="razmerf" src="images/ex4.jpg" alt="img">
</div>
<div id="per">
<img class="razmerf" src="images/ex5.jpg" alt="img">
</div>
<div id="per">
<img class="razmerf" src="images/ex6.jpg" alt="img">
</div>
</div>
</div>
</div>///медиа-запрос///
@media screen
and (min-device-width : 411px)
and (max-device-width : 731px) {////pixel2
.par-container{
display: flex;
align-items: center;
justify-content: center;
}
.flex-container {
display: flex;
width: 400px;
flex-wrap: wrap;
}
.part1 {
display: flex;
align-items: center;
justify-content: center;
}
.part2 {
display: flex;
align-items: center;
justify-content: center;
}
#per img {
display: flex;
align-items: center;
justify-content: center;
flex-basis: 100px;
height: 100px;
}
}