时间戳

首页 > 解决方案 > 在 css 中完成的元素分组，改变了基于断点分组的元素数量

css - 在 css 中完成的元素分组，改变了基于断点分组的元素数量

问题描述

我有许多元素，我想按断点分组，例如：

在每组行之间，顶部有空间（见蓝色边框）。

此时我在后端进行拆分，但在后端我不知道断点，需要有多个预先制作的断点，更难更改。我现在有 2 个预制组。

可以在css而不是后端进行（分组）并保持组行之间的空间吗？

.group {
    align-items: flex-start;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-top: 20px;
    border: 1px solid blue;
}
.group:first-child { margin: 0; }
.group:last-child { margin-bottom: 50px; }

.group .item { 
  border: 1px solid red;

}

.group-4 .item { 
  width:100%/4;
}
<div class="group group-4 group-3-md group-2-sm">
  <div class="item">
     <a class="button" href="components">Element1</a>
  </div>
  <div class="item">
     <a class="button" href="components">Element2</a>
  </div>
  <div class="item">
     <a class="button" href="components">Element3</a>
  </div>
  <div class="item">
     <a class="button" href="components">Element4</a>
  </div>
</div>
<div class="group group-4 group-3-md group-2-sm">
  <div class="item">
     <a class="button" href="components">Element1</a>
  </div>
  <div class="item">
     <a class="button" href="components">Element2</a>
  </div>
  <div class="item">
     <a class="button" href="components">Element3</a>
  </div>
  <div class="item">
     <a class="button" href="components">Element4</a>
  </div>
</div>

标签： cssflexbox

解决方案

推荐阅读