flex布局中单个子元素区别于其他子元素的主轴对其方式实现

一、背景

在flex布局中，我们使用父级元素的display和justify-content来实现flex布局，并设定主轴对其方式，这两个属性详见flex布局-阮一峰

.box {
  display: flex;
  justify-content: flex-start;
}

这时设置了justify-content以后，所有的子元素都沿着主轴起始位置对齐，如果某一个子元素需要沿其他方向，比如主轴是横轴，方向是从左向右，这样设置以后，所有子元素都在左边向右边排列，如果我某一个子元素需要放在最右边，而不是和其他子元素一样顺着排列，应该如何实现？
对于交叉轴的方向，有align-center属性设置，而子元素的align-self属性可以覆盖这个属性，设置属于子元素自身的交叉在对齐方向。但主轴的对其方向则没有这个属性。

二、实现

我可以通过设置需要区别于其他方向的子元素的前一个兄弟元素的margin来实现这个需求。
比如

image.png

原本的jusity-content是flex-start，而其中27 28 29 30需要右对齐，这时设置26的右外边距可以实现。
参考： [https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties/33856609#33856609
]