Javascript 将动态创建的点从左上角定位到右下角

我想使用javascript函数向

dots

容器添加一些红点和绿点，如下所示：

const dots=document.querySelector（'.dots'）；
函数addGreenDot（）{
dots.innerHTML+=`.`；
}
函数addRedDot（）{
dots.innerHTML+=`.`；
}
for（设i=0；i<10；i++）{
添加绿点（）；
}
for（设i=0；i<10；i++）{
addRedDot（）；
}

html，正文{
身高：100%；
}
身体{
背景：#FAFC；
保证金：0；
}
.柔性容器{
身高：100%；
填充：0；
保证金：0；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.圆点{
身高：30%；
宽度：80%；
字体大小：粗体；
显示器：flex；
位置：绝对位置；
字体大小：100px；
最高：60%；
轮廓：0.1vw橙色虚线；
文本对齐：居中；
}
雷多先生{
颜色：红色；
}
绿点先生{
颜色：绿色；
}

const dots=document.querySelector（'.dots'）；
函数addGreenDot（）{
dots.innerHTML+=`；
}
函数addRedDot（）{
dots.innerHTML+=`；
}
for（设i=0；i<20；i++）{
添加绿点（）；
}
for（设i=0；i<10；i++）{
addRedDot（）；
}

*{
框大小：边框框；
}
html，正文{
身高：100%；
}
身体{
背景：#FAFC；
保证金：0；
}
.柔性容器{
身高：100%；
填充：0；
保证金：0；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.圆点{
宽度：80%；
填充：20px；
右边距：-10px；
边缘底部：-10px；
字体大小：粗体；
显示器：flex；
柔性包装：包装；
文本对齐：居中；
轮廓：0.1vw橙色虚线；
}
雷多先生{
宽度：10px；
高度：10px；
背景色：红色；
边界半径：50%；
右边距：10px；
边缘底部：10px；
}
绿点先生{
宽度：10px；
高度：10px；
背景颜色：绿色；
边界半径：50%；
右边距：10px；
边缘底部：10px；
}

---

您可以使用

display:inline block

而不是

flex

来显示相邻的点。一旦一个点不合适，它就会跳到下一行。您也不需要外部容器

HTML

<div class="dots"></div>

.dots {
  display:block;
  height: 30%;
  width: 50vw;
  font-weight: bold;
  font-size: 100px;
  outline: 0.1vw dashed orange;
  text-align: left;
}

.redDot {
  color: red;
  display: inline-block;
}

.greenDot {
  color: green;
  display: inline-block;
}