css - 在 css 中 - 如何仅在屏幕的顶行、底行和最右列绘制正方形

Question

我想在 3 行上绘制 div(50 个小方 block ):20 个在容器的最上面一行，20 个在容器的底部行和 10 个最右边的容器列。 类似的东西:

*******
      *
      *
*******

我尝试使用 flexbox 但失败了。然后我尝试了类似的东西但失败了:

.board{
  position: relative;
  height: 445px;
  width: 840px;
  margin: 100px;
  padding: 0;
  border: 2px solid rgb(8, 8, 8);
  display: block;
  background-color: grey; 
}


.top-row{
  position: absolute;
  top: 0;
  left: 0;
}

.bottom-row{
  position: absolute;
  bottom: 0;
  left: 0;
}

.right-column{
  top: 0;
  width: 40px;
  height: 40px;
  position: absolute;
  float: right;
}

实际情况并不好。也没有像我希望的那样响应

Answer 1

使用 flexbox 你可以试试这个:

.container {
  display:flex;
  flex-wrap:wrap;
}
.container > div {
  width:calc(100% / 20); /*20 div per row*/
  background:red;
  border:1px solid;
  box-sizing:border-box;
}
/*keep the square ratio*/
.container > div:before {
  content:"";
  display:block;
  padding-top:100%;
}
/**/
/*use a big margin to push to the right from the 21th element*/
.container > div:nth-child(n + 21) {
  background:green;
  margin-left:calc(100% - 100% / 20);
}
/*reset the margin after the 31th element */
.container > div:nth-child(n + 31) {
  background:blue;
  margin-left:0;
}


/* Irrelevant styles */
.container {
  counter-reset: section;
}
.container > div {
 position:relative;
}
.container > div::after {
  counter-increment: section;
  content: counter(section);
  position:absolute;
  top:0;
  color:#fff;
}

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>