CSS Flex如何制作动态网格

Question

我正在尝试为我的产品卡图像制作动态网格系统，但我无法弄清楚。

我需要此布局，具体取决于产品的图像数量。问题是子项目是图像，不会裁剪。

我尝试了flex，但我无法将图像裁剪。

html

  <div class="kit-product-card">
  <div class="kit-image-container">
    <% kit.products.each do |kit_product| %>
    <div>
      <img src="test.png">
    </div>
    <% end %>
  </div>
  </div>

是否有什么想法？也许玩溢出：隐藏 + nth-childs？非常感谢！

CSS

.kit-product-card {
  background: white;
  border-radius: 4px;
  display: flex;
  justify-content: flex-start;
  text-align: center;
  align-items: center;
  padding: 12px;
  margin: 10px 0;
  border: 1px solid darken(#f7f8fd, 4%);
}

.kit-image-container {
  display: inline-flex;
  flex-wrap: wrap; /* enable the wrap */
  vertical-align: top;
  width: 100%;
  overflow: hidden;
  padding: 10px;
  div {
    flex-basis: 50%; /* width = 50% */
    flex-grow: 1; /* grow if alone in the last row */
    border: 1px solid white;
    box-sizing: border-box;
  }

Answer 1

正如评论中已经说过的那样，我将在定义儿童元素数量的容器中添加一个类。您可以使用Ruby有条件地执行此操作（我只是在示例中使用JS做到这一点）。

然后，您起诉Flexbox并根据儿童div的定义，具体取决于子元素的数量（按班级设置）。要适合图像，您可以使用object-fit：cover在图像上：

// JS code just for demonstration purpose
var input = document.querySelector('input');
input.addEventListener('change', function() {
  var amount = input.value;
  var container = document.querySelector('.kit-image-container');
  container.innerHTML = '';
  var class_name = '';
  for (let i = 1; i <= amount; i++) {
    let ele = document.createElement('div');
    ele.innerHTML = '<img src="https://via.placeholder.com/100.jpg">';
    container.appendChild(ele);
    class_name = `child-${i}`;
  }
  container.className = '';
  container.classList.add('kit-image-container', class_name);
})

.kit-image-container {
  display: flex;
  flex-wrap: wrap;
}

.kit-image-container > div {
  width: 100%;
}

.child-4 > div,
.child-5 > div,
.child-6 > div,
.child-7 > div,
.child-8 > div {
  width: 50%;
}

.child-3 > div:nth-last-of-type(-n+2) {
  width: 50%;
}

.child-6 > div {
  width: calc(100% / 3);
}

.child-5 > div:nth-last-of-type(-n+3),
.child-7 > div:nth-last-of-type(-n+3),
.child-8 > div:nth-last-of-type(-n+3) {
  width: calc(100% / 3);
}

.child-8 > div:nth-last-of-type(-n+6) {
  width: calc(100% / 3);
}

.kit-image-container > div > img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}




/* for visualization only */
.kit-image-container {
  margin-top: 2em;
}

.kit-image-container > div {
  border: 1px solid black;
  box-sizing: border-box;
  min-height: 50px;
}

<input type="number" min="1" max="8" step="1" value="1">
<label>Define the amount of child element</label>


<!-- actual Markup -->
<div class="kit-image-container child-3"></div>