並排放置縮略圖

Question

我正在嘗試在http://www.romero-fliesen.de/test-上實現此https://www.sitepoint.com/using-modern-css-to-build-a-sensitive-image-grid/方案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%