代码之家 › 专栏 › 技术社区 › user3541631

在css中对元素进行分组,根据断点更改分组的元素数

flexbox css3 css

0

user3541631 · 技术社区 · 6 年前

我有很多元素,我想按断点分组,例如:

大号:4
中等:3
小型:2

在每组行之间,顶部有空间(请参见蓝色边框)。

现在我在后端进行拆分,但在后端我不知道断点,需要有多个pr emade断点,更难更改。我现在有两个预先制作的小组。

是否可以在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>

0 回复 | 直到 6 年前