并排放置缩略图

【问题标题】：Place thumbnail images side by side并排放置缩略图
【发布时间】：2018-07-02 22:41:36
【问题描述】：

我正在尝试使用http://www.romero-fliesen.de/test-portfolio/#cbp=http://www.romero-fliesen.de/cubeportfolio/cube-post-1/ 来实现这个https://www.sitepoint.com/using-modern-css-to-build-a-responsive-image-grid/ 场景

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

但我最终得到的缩略图尺寸更小了。任何有用的提示将不胜感激。

【问题讨论】：

请阅读：How to create a Minimal, Complete, and Verifiable example

标签： html css wordpress image-gallery

【解决方案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%

【讨论】：