flexbox space-between 并右对齐

Question

我有一个包含 1 到 3 个项目的 div，我希望它们表现得像这样：

三项：用justify-content: space-between
整行
```
+-----------+
| 1 | 2 | 3 |
+-----------+
```

如果只有 1 项，请将其右对齐。

+-----------+
|       | 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

使用弹性方向属性

.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;
}

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

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

Answer 3

由此变化

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

到

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

flexbox space-between 并右对齐

flexbox space-between and align right

css

flexbox