css - 将元素与 margin-left : auto 右对齐

Question

我想将元素右对齐。我知道我应该使用 float right 将元素右对齐，但我有一个复杂的元素，我需要了解为什么 margin: 0 0 0 auto;在一种情况下将元素右对齐，以及为什么它在其他情况下不起作用。

当容器为flex容器时，margin: 0 0 0 auto;将元素右对齐，如您在此示例中所见:

div {
  display: flex;
  width: 400px;
  background: #eee;
}

span {
  margin: 0 0 0 auto;
}

<div>
  <span>test</span>
</div>

但是当容器不是 flex 容器时，item 留在左边:

div {
  width: 400px;
  background: #eee;
}

span {
  margin: 0 0 0 auto;
}

<div>
  <span>test</span>
</div>

所以我的问题是:

• 是否可以在不对容器使用 flex 的情况下将带有边距的元素右对齐？
• Flex 示例是否按照应有的方式工作，还是 flexbox 中的错误？

Answer 1

1. flexbox 中的自动边距会覆盖默认对齐方式。这article解释。
2. 将自动边距放在内联元素上，例如 <span>将被忽略。自动边距适用于 block 元素，如果它小于包含它的元素，它会很明显。如果没有给定任何宽度，则 block 元素默认为 100%。请参阅代码段。

片段

div {
  width: 400px;
  background: #eee;
}

span {
  margin: 0 0 0 auto;
  display: block;
  width: 100px;
  border: 1px dashed red;
}

<div>
  <span>test</span>
</div>