如何只令两个行内元素中的一个垂直居中？

Question

前端小白，拜托轻喷！在学flex布局的时候看了阮一峰老师的举例，其中有这个图：

按照阮老师的代码，我做出来的效果是这样的：

第二个点在主轴方向上没有居中，心很痛。
源码如下：

<div id="d">
    <span class="points" id="s1"></span>
    <span class="points" id="s2"></span>
</div>

.points {
  border-radius:40px;
  width: 80px;
  height: 80px;
  background-color: aqua;
}

#s2 {
  align-self: center;
  justify-self: center;//这一行阮老师没有加，我出现了以上问题，觉得加了就好了，然鹅还是没有任何卵用
}

#d {
  border-radius: 20px;
  width: 360px;
  height: 360px;
  background-color: black;
  display: flex;
  padding: 20px;
}

想用纯flex布局的办法解决这个问题，不知道有没有解决的策略？还有想问问为啥这里的justify-self会失效呢？请指正，感激不尽！

Answer 1

阮老师的第一句话就是一行最多放三个点，你的容器设置的宽度太大了，放四个都绰绰有余把宽度从360px减小到260px就行参考代码,justify-self并没有失效，只是你对他的理解有一点问题他不作用在整个主轴上而是只作用在该元素所占用的空间内看这里理解前面那句话

width为360时

width为260时