将元素右对齐,边距为左:auto

Question

我想将一个元素对齐到右边.我知道我应该使用float右对齐元素,但是我有一个复杂的项目,我需要理解为什么margin:0 0 0 auto; 在一个案例中将一个元素对齐到右边,以及为什么它在其他情况下不起作用.

当容器是flex容器时,边距:0 0 0 auto; 如您在此示例中所示,将元素对齐到右侧:

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

span {
  margin: 0 0 0 auto;
}

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

但是当容器不是弹性容器时,该项目保留在左侧:

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

span {
  margin: 0 0 0 auto;
}

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

所以我的问题是:

• 是否可以在不使用容器上的flex的情况下将项目与边缘对齐？
• Flex示例是如何工作的,还是Flexbox中的错误？

Answer 1

1. flexbox 中的自动边距会覆盖默认对齐方式。这篇文章解释了。
2. 将自动边距放在诸如 a 之类的内联元素<span>上将被忽略。自动边距适用于块元素，如果它小于包含它的元素，它就会很明显。如果没有给定任何宽度，则默认情况下块元素为 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>