flexbox space-between和align right

Question

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

1. 三项:全程采取 justify-content: space-between

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

2. 如果只有一个项目,请将其与右侧对齐.

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

这是我的代码:

.container {
  display: flex;
  width: 300px;
  justify-content: space-between;
  /* Styling only */
  padding: 10px;
  background: #ccc;
  margin-bottom: 10px;
}
.container div {
  /* Styling only */
  background: white;
  padding: 20px 40px;
  width: 10px;
}

<div class="container">
  <div>
    1
  </div>
  <div>
    2
  </div>
  <div>
    3
  </div>
</div>

<div class="container">
  <div>
    3
  </div>
</div>

我找到了一个解决方案direction: rtl,但我希望有一个不太讨厌的解决方案,我不想重新安排我的dom.

有任何想法吗？

Answer 1

有一个选择器.

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

.container {
  display: flex;
  width: 300px;
  justify-content: space-between;
  /* Styling only */
  padding: 10px;
  background: #ccc;
  margin-bottom: 10px;
}
.container div {
  /* Styling only */
  background: white;
  padding: 20px 40px;
  width: 10px;
}
.container div:only-child {
  align-self: flex-end;
  margin-left: auto;
}

<div class="container">
  <div>
    1
  </div>
  <div>
    2
  </div>
  <div>
    3
  </div>
</div>

<div class="container">
  <div>
    3
  </div>
</div>

Answer 2

使用 flex-direction 属性

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

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

.container {
  display: flex;
  width: 300px;
  justify-content: space-between;
  flex-direction:row-reverse;
  /* Styling only */
  padding: 10px;
  background: #ccc;
  margin-bottom: 10px;
}
.container div {
  /* Styling only */
  background: white;
  padding: 20px 40px;
  width: 10px;
}