并排放置缩略图

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 property。

.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%