如何使用flexbox放置两行不平坦，居中的元素？

时间：2020-02-05 21:39:30

标签： css flexbox

这是我要创建的布局：

enter image description here

这是一个由格子组成的网格：

  • 每个框的最大元素数量必须是可配置的（在这种情况下，为4，但是可以为不同数量）。
  • 如果最后一行不完整并且有“孤立的”，则元素必须保持居中，但宽度必须与其他框相同。
  • 网格必须使用其容器的整个宽度。这意味着当行已满时，外面的盒子周围没有空间。
  • 最好必须存在一种设置框之间间距的方法

我认为最好的工具是flexbox，但遇到以下问题：

我的方法是这样的：

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box {
  width: 22%;
  height: 200px;
  /* pure decoration... */
  box-shadow: 0 0 10px black inset;
  background: green;
}
<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

产生以下结果：

enter image description here

Codepen link

这里有几个问题：

  1. 最后一行未居中。
  2. 我不能在框之间设置固定的边距。我还希望无论行中可以容纳多少个元素，此边距始终是相同的。
  3. 确实带来了一些小麻烦，但是设置每行的最大元素数量的方法很不稳定。我必须进行一个除以100 / max的运算，这可能会导致奇怪的结果（100/3 = 33.333333 ...）。

如何获得更好的结果？

更新

我忘记添加的要求：

  • 网格必须使用其容器的整个宽度。这意味着当行已满时，外面的盒子周围没有空间。

4 个答案:

答案 0 :(得分：2)

更新比例说明

  • 我们使用css variables，例如--margin-right-value，--row-elements-number
  • 我们使用.boxes2至.boxes20形式的类来定义具有不同元素编号的行的不同行为。
  • 我们包装.boxes<number>类以简化css，我们在包装器中匹配以 boxes 开头的类，可选地，无需包装就可以维护。
  • 当然margin-top（也可以根据需要用作变量），并且--margin-right-value可以在每个.boxes<number>类中指定。

一旦编写，便可以在需要的位置使用类。

查看摘要。或https://jsfiddle.net/beluginni/kb8L71c3/ 

.wrapper [class*="boxes"] {
  margin-bottom: 30px; /* to separate visualy*/
}

:root {
  --margin-right-value: 10px; /* margin between elements in row, can be specified within each of boxes<n> classes */
}

.boxes2 { --row-elements-number: 2; }
.boxes3 { --row-elements-number: 3; }
.boxes4 { --row-elements-number: 4; }
.boxes5 { --row-elements-number: 5; }
.boxes6 { --row-elements-number: 6; }
.boxes7 { --row-elements-number: 7; }
.boxes8 { --row-elements-number: 8; }
.boxes9 { --row-elements-number: 9; }
.boxes10 { --row-elements-number: 10; }
.boxes11 { --row-elements-number: 11; }
.boxes12 { --row-elements-number: 12; }
.boxes13 { --row-elements-number: 13; }
.boxes14 { --row-elements-number: 14; }
.boxes15 { --row-elements-number: 15; }
.boxes16 { --row-elements-number: 16; }
.boxes17 { --row-elements-number: 17; }
.boxes18 { --row-elements-number: 18; }
.boxes19 { --row-elements-number: 19; }
.boxes20 { --row-elements-number: 20; }


.wrapper [class*="boxes"] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  outline: dotted red 1px;
}


/*width: calc((100% - (<margin_value> * (<row_el_number> - 1))) / <row_el_number>)*/
.box {
  width: calc((100% - (var(--margin-right-value) * (var(--row-elements-number) - 1))) / var(--row-elements-number));
  height: 100px;
  box-shadow: 0 0 10px black inset;
  background: green;
}

.boxes2 .box:nth-child(n+3),
.boxes3 .box:nth-child(n+4),
.boxes4 .box:nth-child(n+5),
.boxes5 .box:nth-child(n+6),
.boxes6 .box:nth-child(n+7),
.boxes7 .box:nth-child(n+8),
.boxes8 .box:nth-child(n+9),
.boxes9 .box:nth-child(n+10),
.boxes10 .box:nth-child(n+11),
.boxes11 .box:nth-child(n+12),
.boxes12 .box:nth-child(n+13),
.boxes13 .box:nth-child(n+14),
.boxes14 .box:nth-child(n+15),
.boxes15 .box:nth-child(n+16),
.boxes16 .box:nth-child(n+17),
.boxes17 .box:nth-child(n+18),
.boxes18 .box:nth-child(n+19),
.boxes19 .box:nth-child(n+20),
.boxes20 .box:nth-child(n+21) {
  margin-top: 4%; /* margin between rows, can be represented as var and specified within each of boxes<n> classes */
}

.boxes2 .box:not(:nth-child(2n)):not(:last-child),
.boxes3 .box:not(:nth-child(3n)):not(:last-child),
.boxes4 .box:not(:nth-child(4n)):not(:last-child),
.boxes5 .box:not(:nth-child(5n)):not(:last-child),
.boxes6 .box:not(:nth-child(6n)):not(:last-child),
.boxes7 .box:not(:nth-child(7n)):not(:last-child),
.boxes8 .box:not(:nth-child(8n)):not(:last-child),
.boxes9 .box:not(:nth-child(9n)):not(:last-child),
.boxes10 .box:not(:nth-child(10n)):not(:last-child),
.boxes11 .box:not(:nth-child(11n)):not(:last-child),
.boxes12 .box:not(:nth-child(12n)):not(:last-child),
.boxes13 .box:not(:nth-child(13n)):not(:last-child),
.boxes14 .box:not(:nth-child(14n)):not(:last-child),
.boxes15 .box:not(:nth-child(15n)):not(:last-child),
.boxes16 .box:not(:nth-child(16n)):not(:last-child),
.boxes17 .box:not(:nth-child(17n)):not(:last-child),
.boxes18 .box:not(:nth-child(18n)):not(:last-child),
.boxes19 .box:not(:nth-child(19n)):not(:last-child),
.boxes20 .box:not(:nth-child(20n)):not(:last-child) {
  margin-right: var(--margin-right-value);
}
<div class="wrapper">
  <div class="boxes2">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes3">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>

  <div class="boxes4">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>

  <div class="boxes5">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes6">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes7">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes8">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes9">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes10">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes11">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes12">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes13">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes14">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes15">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes16">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes17">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes18">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes19">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes20">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

JSFieddle to play with different values

更新更好的边距和.box宽度定义

用于计算它们之间的.box width和margin的公式：

如果知道边距： width: calc((100% - (<margin_value> * (<row_elements_number> - 1))) / <row_elements_number>)。

    连续
  • 连续4个 .box width: calc((100% - (<margin_value> * (4 - 1))) / 4)
  • 连续3 .box width: calc((100% - (<margin_value> * (3 - 1))) / 3)
    • 连续
  • 连续5个 .box width: calc((100% - (<margin_value> * (5 - 1))) / 5)

如果知道.box宽度： margin-rigth: calc((100% - <.box_width_value> * <row_elements_number>) / (<row_elements_number> - 1))。

  • 连续4个 margin-rigth: calc((100% - <.box_width_value> * 4) / (4 - 1))
  • 连续3个 margin-rigth: calc((100% - <.box_width_value> * 3) / (3 - 1))
  • 连续5个 margin-rigth: calc((100% - <.box_width_value> * 5) / (5 - 1))

css很简单

.box:not(:nth-child(<row-elements-number>n)):not(:last-child) {
  margin-right: <desired value>;
}

主要思想

是要制作justify-content: center;并将margins添加到每个孩子除 :nth-child(<row-elements-number>n)):not(:last-child)之外。在我们的情况下，每个4th和last都没有边距值。

让我们以margin-rigth: 4% => box-width 为calc((100% - (4% * (4 - 1))) / 4) 

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: dotted black 1px; /* to see edges */
}

/*width: calc((100% - (<margin_value> * (4 - 1))) / 4)*/
.box {
  width: calc((100% - (4% * (4 - 1))) / 4);
  height: 100px; /* changed */
  /* pure decoration... */
  box-shadow: 0 0 10px black inset;
  background: green;
}

.box:nth-child(n+5) {
  margin-top: 4%; /*added*/
}

.box:not(:nth-child(4n)):not(:last-child) {
  margin-right: 4%;
}
<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

更新以说明调整

要控制margin，最后一行将margin-bottom: value;类中的box替换为

.box:nth-child(n + (<row_elements_number> + 1)) {
  margin-top: <desired_value>;
}

连续3个案例

让我们拿margin-right: 1% => .box width:calc((100% - (1% * (3 - 1))) / 3) 

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: dotted black 1px; /* to see edges */
}

/*width: calc((100% - (<margin_value> * (3 - 1))) / 3)*/
.box {
  width: calc((100% - (1% * (3 - 1))) / 3);
  height: 100px; /* changed */
  /* pure decoration... */
  box-shadow: 0 0 10px black inset;
  background: green;
}

.box:nth-child(n+4) {
  margin-top: 1%; /*added*/
}

.box:not(:nth-child(3n)):not(:last-child) {
  margin-right: 1%;
}
<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

连续5个案例

让我们拿margin-right: 5% => .box width: calc((100% - (5% * (5 - 1))) / 5) 

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: dotted black 1px; /* to see edges */
}

/* width: calc((100% - (<margin_value> * (5 - 1))) / 5) */
.box {
  width: calc((100% - (5% * (5 - 1))) / 5);
  height: 100px; /* changed */
  /* pure decoration... */
  box-shadow: 0 0 10px black inset;
  background: green;
}

.box:nth-child(n+6) {
  margin-top: 5%; /*added*/
}

.box:not(:nth-child(5n)):not(:last-child) {
  margin-right: 5%;
}
<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

连续4个案例，固定间隙很小（边距值为4px）

=> .box width:calc((100% - (4px * (4 - 1))) / 4) 

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: dotted black 1px; /* to see edges */
}

/* width: calc((100% - (<margin_value> * (4 - 1))) / 4) */
.box {
  width: calc((100% - (4px * (4 - 1))) / 4);
  height: 100px; /* changed */
  /* pure decoration... */
  box-shadow: 0 0 10px black inset;
  background: green;
}

.box:nth-child(n+5) {
  margin-top: 4px; /*added*/
}

.box:not(:nth-child(4n)):not(:last-child) {
  margin-right: 4px;
}
<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

连续4个案例和较大的固定差距（边距值为80px）

=> .box width:calc((100% - (80px * (4 - 1))) / 4) 

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: dotted black 1px; /* to see edges */
}

/* width: calc((100% - (<margin_value> * (4 - 1))) / 4) */
.box {
  width: calc((100% - (80px * (4 - 1))) / 4);
  height: 100px; /* changed */
  /* pure decoration... */
  box-shadow: 0 0 10px black inset;
  background: green;
}

.box:nth-child(n+5) {
  margin-top: 80px; /*added*/
}

.box:not(:nth-child(4n)):not(:last-child) {
  margin-right: 80px;
}
<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

连续4个案例，固定框宽（60px）

=> margin-right: calc((100% - 60px * 4) / (4 - 1))。

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: dotted black 1px; /* to see edges */
}

/* margin-rigth: calc((100% - <.box_width_value> * 4) / (4 - 1)) */
.box {
  width: 60px;
  height: 100px; /* changed */
  /* pure decoration... */
  box-shadow: 0 0 10px black inset;
  background: green;
}

.box:nth-child(n+5) {
  margin-top: calc((100% - 60px * 4) / (4 - 1)); /*added*/
}

.box:not(:nth-child(4n)):not(:last-child) {
  margin-right: calc(33.33% - 80px);
}
<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

答案 1 :(得分：1)

您需要添加justify-content属性以使框居中，并且align-content应该为space-around。

.boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-around;
}

对于方框样式，您需要在其周围留出一定的空白以将它们隔开。

这是工作版本的代码笔：https://codepen.io/usmanity/pen/zYGYrgZ?editors=0100

答案 2 :(得分：0)

Check here 

.boxes {
  display: flex;
  flex-wrap: wrap;

  /*edited*/
  justify-content: center;
}
.box {
  width: 23%;
  height: 13rem;
  box-shadow: 0 0 10px black inset;
  background: green;

  /*edited*/
  margin: 1%; /* or .5rem*/
  border-radius: .2rem;

enter image description here

谢谢

答案 3 :(得分：-1)

Please try this - 
    <ul class="boxes">
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
      </ul>

    ul.boxes {
      margin: 0 -10px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    ul li.box {
      width: calc(100%/4 - 20px);
      background-color: green;
      height: 200px;
      margin: 0 10px 20px;
    }
相关问题
最新问题