Question

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

当容器是弹性容器时，边距：0 0 0自动;如您在此示例中所示，将元素对齐到右侧：

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

flexbox中的自动边距会覆盖默认对齐方式。这article解释道。
将自动边距放在内联元素（例如<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>

Answer 2

这既不是flex的错误，也不是与margin有关的错误。你可以随时获得任何带有保证金的内容，但这里发生的是

案例1（display: flex）：

简单地说，flex总是期望一个装满的容器，所以它会用剩余空间填充剩余的空间。在这里你给了margin: 0 0 0 auto。所以你提到top为0，right为0，bottom为0，为自动。由于您将left指定为auto，因此flexbox会填充留有边距的元素，因此元素显示在右侧。但更好的方法是给出一个特定的margin-left而不是auto，并使用justify-content属性到容器

div {
  justify-content: flex-end;
  display: flex;
  width: 400px;
  background: #eee;
}

span {
  margin: 0 0 0 0; //can be 0 or 10px or any exact value.
}

案例2：您没有提到任何显示类型，因此默认情况下它将是block，在块中它不会期望像flex一样填充容器。因此margin: 0 0 0 auto中的自动被视为0.因此内容被放置在左边。没有直接的方法可以像flex中的justify-content那样在块中对齐。但可以通过多种方式完成，例如使用float，将position设置为absolute，将right设置为0。

我个人喜欢在使用对齐方式时使用flex。

将元素右对齐，边距为左：auto

2 个答案: