Css 和之间的flexbox空间向右对齐

我有一个包含1到3项的div，我希望它们的行为如下：

三项：用

justify content:space-between

+-----------+
| 1 | 2 | 3 |
+-----------+

如果只有一个项目，请将其向右对齐

+-----------+
|       | 3 |
+-----------+

这是我的密码：

.container{
显示器：flex；
宽度：300px；
证明内容：之间的空间；
/*仅样式*/
填充：10px；
背景：#ccc；
边缘底部：10px；
}
.货柜组{
/*仅样式*/
背景：白色；
填充：20px 40px；
宽度：10px；
}

1.
2.
3.
3.

有一个选择器

.container div:only-child {
  margin-left: auto;
}

.container{
显示器：flex；
宽度：300px；
证明内容：之间的空间；
/*仅样式*/
填充：10px；
背景：#ccc；
边缘底部：10px；
}
.货柜组{
/*仅样式*/
背景：白色；
填充：20px 40px；
宽度：10px；
}
.货柜部：独生子女{
自对准：柔性端；
左边距：自动；
}

1.
2.
3.
3.

使用弯曲方向属性

.container {
  flex-direction:row-reverse;
}

.container{
显示器：flex；
宽度：300px；
证明内容：之间的空间；
弯曲方向：行反向；
/*仅样式*/
填充：10px；
背景：#ccc；
边缘底部：10px；
}
.货柜组{
/*仅样式*/
背景：白色；
填充：20px 40px；
宽度：10px；
}

1.
2.
3.
3.

从此更改

.container {
    justify-content: space-between;
}

至

.container {
    justify-content: flex-end;
}

---

事实上，使用

marginleft:auto

就足够了，即使没有

独生子女

slector。谢谢在我的测试中，在最后一个子项上使用

margin left:auto

会将所有早期的子项推到最左侧，就好像它们都是

justify content:flex start

，因此

独生子项是实际的解决方案。对于有一个可见子对象的场景，这有一个问题，其他子项使用
display:none
，而不是完全从dom中删除--
：在这种情况下，独子项将不起作用。没有理由这样做……这个问题绝不会涉及
display:none
，如果它有其他解决方案，那么它将是合适的。CSS选择DOM中的元素，而不管它们是否可见。这太违反直觉了。我一直在寻找这个。感谢你的提示。说明：rtl实际上不是一个黑客。不幸的是，这会重新排序DOM，OP不想这样做。如果有多个项目，则按[1,2,3]顺序排列的单元格将改为按[3,2,1]顺序排列。这将仅向右对齐，但会删除单元格之间的空格