Поместите уменьшенные изображения рядом

Question

Я пытаюсь реализовать этот сценарий https://www.sitepoint.com/using-modern-css-to-build-a-responsive-image-grid/ здесь http://www.romero -fliesen.de / test-portfolio / # cbp = http://www.romero -fliesen.de / cubeportfolio / cube-post-1 / с помощью

.cbp-slider-wrap { 
  display: flex;
  padding: 0 4px;
  float: left;
}
.cbp-slider-item, .cbp-slider-wrap {
  display: flex;
  padding: 0 4px;
  float: left;
}

но в итоге я получал миниатюры меньшего размера Любые полезные советы будут оценены.

Answer 1

Если я правильно понял, вам нужно установить свойство flex-wrap .

.cbp-slider-wrap {
   display: flex;  //Set images side by side.
   flex-wrap: wrap; //Allows images to wrap into multiple lines avoiding them to shrinking. Number of image per line and their size can be controlled with 'max-width' (below)
}  

.cbp-slider-item {
   margin: 8px;
   max-width: 30%; //In this specific case, 22% will fit 4 images per line whereas 47% 2 images per line. 
}

Как это выглядит:

max-width: 30%

max-width: 22%

max-width: 47%