Пытаюсь сделать адаптивный коллаж из фото в хэдэре при помощи flex. Но есть проблема, при нормальном расширении экрана всё хорошо, но как только меняю его, всё плывёт ползёт и скачет, что самое интересное, когда возвращаю нормальный размер экрана всё как было поползшее, так и осталось. А нужно что бы все эти картинки просто меняли свой размер, а не уходили друг под друга. У меня два ряда, в каждом по 6 картинок. Может посоветуете что-то?
UPD код
.flex-container {
display: -webkit-flex;
flex-direction: row;
justify-content: center;
align-items: center;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
align-content: stretch;
}
header.header {
width: auto;
height: 470px;
display: block;
}
#photo_12 {
background-image: url("../img/hot-dog.png");
display: inline;
background-size: cover;
width: 175px;
height: 235px;
z-index: 89;
}
#photo_11 {
background-image: url("../img/hot-dog2.png");
display: inline;
width: 236px;
height: 236px;
z-index: 88;
}
#photo_10 {
background-image: url("../img/hot-dog3.png");
display: inline;
width: 236px;
height: 235px;
z-index: 87;
}
#photo_9 {
background-image: url("../img/hot-dog7.png");
width: 236px;
height: 235px;
z-index: 86;
}
#photo_8 {
background-image: url("../img/hot-dog13.png");
width: 236px;
height: 235px;
z-index: 85;
}
#photo_7 {
background-image: url("../img/hot-dog2.png");
width: 235px;
height: 236px;
z-index: 84;
}
#photo_6 {
background-image: url("../img/hot-dog5.png");
width: 176px;
height: 234px;
z-index: 83;
}
#photo_5 {
background-image: url("../img/hot-dog10.png");
width: 236px;
height: 234px;
z-index: 82;
}
#photo_4 {
background-image: url("../img/hot-dog6.png");
width: 236px;
height: 234px;
z-index: 81;
}
#photo_3 {
background-image: url("../img/hot-dog8.png");
width: 235px;
height: 234px;
z-index: 80;
}
#photo_2 {
background-image: url("../img/hot-dog11.png");
width: 236px;
height: 234px;
z-index: 79;
}
#photo_1 {
background-image: url("../img/hot-dog10.png");
width: 235px;
height: 234px;
z-index: 78;
}
Простой
