Есть пять блоков нужно чтобы при уменьшении блоков и переносе на следующую строку блоки первого ряда выстраивались по центру а блок второго ряда был прижат с лева. Понимаю что можно задать марджин 0 ауто для определенного разрешения и определенную ширину под размер блоков с отступом но хотелось бы узнать как более изящно решить эту проблему.
Далее код с решением для определенного разрешения.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box">
<div class="item">Come</div>
<div class="item">Come</div>
<div class="item">Come</div>
<div class="item">Come</div>
<div class="item">Come</div>
</div>
</body>
</html>
html,body{
height: 100%;
}
*{
margin:0;
padding:0;
}
.box{
display:flex;
flex-wrap:wrap;
justify-content: flex-start;
}
.item{
width: 300px;
height: 300px;
background-color: black;
}
@media (min-width: 576px)
{
.item{
width: 100%;
height: 300px;
margin: 30px;
}
}
@media (min-width: 550px ){
.item{
width: 300px;
height: 300px;
margin: 30px;
}
}
@media (min-width: 1550px) and (max-width: 1799px){
.item{
width: 300px;
height: 300px;
margin: 30px;
}
.box{
max-width:1440px;
margin: 0 auto;
}
}
@media (min-width: 1800px){
.item{
height: 300px;
width: 300px;
margin: 30px;
}
}
Средний
