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

我想在3行上绘制div（50个小方块）：在最上面的容器行中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;
}

实际不好。我也没有回应

最佳答案

另一个弹性示例：我将您的蓝色框放大以指示编号。

*,
*:before,
*:after {
  box-sizing: border-box;
}

.box {
  display: inline-block;
  position: relative;
  width: auto;
  height: auto;
  border: 2px solid grey;
  background-color: blue;
}

.row-ends {
  position: relative;
  display: flex;
  flex-direction: row;
}

.row-mid {
  position: relative;
  display: flex;
  flex-direction: column;
}

.item {
  display: inline;
  width: 20px;
  height: auto;
  text-align: center;
  padding: 5px;
  background: white;
  border: 1px solid purple;
  font-size: 9px;
  margin-left: auto;
}

<div class="box">
  <div class="row-ends">
    <div class="item top">1</div>
    <div class="item top">2</div>
    <div class="item top">3</div>
    <div class="item top">4</div>
    <div class="item top">5</div>
    <div class="item top">6</div>
    <div class="item top">7</div>
    <div class="item top">8</div>
    <div class="item top">9</div>
    <div class="item top">10</div>
    <div class="item top">11</div>
    <div class="item top">11</div>
    <div class="item top">13</div>
    <div class="item top">14</div>
    <div class="item top">15</div>
    <div class="item top">16</div>
    <div class="item top">17</div>
    <div class="item top">18</div>
    <div class="item top">19</div>
    <div class="item top">20</div>
  </div>
  <div class="row-mid">
    <div class="item top">1</div>
    <div class="item top">2</div>
    <div class="item top">3</div>
    <div class="item top">4</div>
    <div class="item top">5</div>
    <div class="item top">6</div>
    <div class="item top">7</div>
    <div class="item top">8</div>
    <div class="item top">9</div>
    <div class="item top">10</div>
  </div>
  <div class="row-ends">
    <div class="item top">1</div>
    <div class="item top">2</div>
    <div class="item top">3</div>
    <div class="item top">4</div>
    <div class="item top">5</div>
    <div class="item top">6</div>
    <div class="item top">7</div>
    <div class="item top">8</div>
    <div class="item top">9</div>
    <div class="item top">10</div>
    <div class="item top">11</div>
    <div class="item top">11</div>
    <div class="item top">13</div>
    <div class="item top">14</div>
    <div class="item top">15</div>
    <div class="item top">16</div>
    <div class="item top">17</div>
    <div class="item top">18</div>
    <div class="item top">19</div>
    <div class="item top">20</div>
  </div>

</div>

关于css - 在CSS中-如何仅在屏幕的顶行，底行和最右列绘制正方形，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54187972/