общий принцип:
1) обертки карт делаем нулевой ширины, сами карты внутри центрируем
2) обертка для всех карт - паддинги по бокам на пол-карты, flex + space-between
все, вложится идеально. если border и прочее то box-sizing по вкусу.
сделал пример, вместо обертки карт использовал сами карты как обертки, псево внутри для отображения карты.
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
.cards {
width: 60%;
border: 2px solid red;
margin: 10px auto;
display: flex;
justify-content: space-between;
padding: 0 45px;
}
.card {
flex-shrink: 0;
position: relative;
width: 0;
height: 126px;
transition: 0.3s;
cursor: pointer;
}
.card:before {
content: "";
box-sizing: border-box;
position: absolute;
top: 0;
left: -45px;
width: 90px;
height: 100%;
background-color: blue;
border-style: inset;
border-radius: 10px;
}
.card:hover{
transform: translate(0, -20px);
}
</style>
</head>
<body>
<div class="cards">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
<div class="cards">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</body>
</html>
upd:
правда, центрирования не будет )
С центрированием будет, если:
- space-evenly
- width: 90 для карточек и отриц отступы
- margin: auto для всех карточек или крайних только
но все эти решения дают плавающие боковые промежутки :(
Простой
