css - Flex 自动边距在 Chrome 和 Safari 中的行为不同

Question

在 Chrome 和 Safari 中打开此页面，我们可以看到不同之处。

在 Safari 中，“数学”关键字不像在 Chrome 中那样位于右侧。

item-3 div 的宽度在 Chrome 和 Safari 中也不同。

我的问题是为什么它在 Safari 中不同以及修复方法是什么(我想在 item-3 上修复 CSS)。

flex-wrap: wrap 不是可接受的解决方案。

.main-container {
  display: flex;
  flex-direction: column;
  width: 400px;
  height: 300px;
  border: 1px solid red;
}

.item-1 {
  display: flex;
  border: 1px solid blue;
}

.item-2 {
  display: flex;
  border: 1px solid green;
}

.item-3 {
  display: flex;
  margin-left: auto!important;
  border: 2px solid yellow;
}

<div class="main-container">
  <div class="item-1">Physics</div>
  <div class="item-2">Chemistry</div>
  <div class="item-3">Maths</div>
</div>

Answer 1

.item-3 的宽度与其兄弟项不同，因为 margin-left: auto 将 flex 元素打包到右侧。这是 flex 自动边距的正常行为。

margin-left 在 Safari 中不起作用的原因是一个谜/错误。

然而，对于跨浏览器支持，在这种情况下有一个简单的 flex 替代自动边距:align-self: flex-end

.main-container {
  display: flex;
  flex-direction: column;
  width: 400px;
  height: 300px;
  border: 1px solid red;
}

.item-1 {
  display: flex;
  border: 1px solid blue;
}

.item-2 {
  display: flex;
  border: 1px solid green;
}

.item-3 {
  display: flex;
  align-self: flex-end;  /* NEW */
  border: 2px solid yellow;
}

<div class="main-container">
  <div class="item-1">Physics</div>
  <div class="item-2">Chemistry</div>
  <div class="item-3"><span>Maths</span></div>
</div>

如果你想让.item-3保持容器的全宽，那么使用justify-content: flex-end。

.main-container {
  display: flex;
  flex-direction: column;
  width: 400px;
  height: 300px;
  border: 1px solid red;
}

.item-1 {
  display: flex;
  border: 1px solid blue;
}

.item-2 {
  display: flex;
  border: 1px solid green;
}

.item-3 {
  display: flex;
  justify-content: flex-end;  /* NEW */
  border: 2px solid yellow;
}

<div class="main-container">
  <div class="item-1">Physics</div>
  <div class="item-2">Chemistry</div>
  <div class="item-3">Maths</div>
</div>

---

align-self: flex-end 的工作原理

使用align-self: flex-end，您将.item-3 沿横轴 一直向右移动.

之所以可行，是因为 flex 容器 (.main-container) 具有 flex-direction: column，这使得主轴垂直，交叉轴水平.

---

justify-content: flex-end 的工作原理

使用justify-content: flex-end，您将沿主轴移动.item-3 的子 一直向右。

这是可行的，因为 .item-3 是一个带有 flex-direction: row 的 flex 容器(默认情况下)，这使得 主轴水平并交叉垂直轴。

然后，根据规范， flex 容器中未被元素显式包装的文本被视为匿名 flex 元素。这允许 justify-content 工作。

4. Flex Items

Each in-flow child of a flex container becomes a flex item, and each contiguous run of text that is directly contained inside a flex container is wrapped in an anonymous flex item.

---

为什么 text-align: right 不起作用

text-align: right 将不起作用，因为 flex 元素(包括匿名元素)被视为 block 级元素。 text-align 属性仅适用于内联级内容。

---

更多信息

在此处了解有关沿主轴 flex 对齐的更多信息:

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

在此处了解有关沿横轴 flex 对齐的更多信息:

• How does flex-wrap work with align-self, align-items and align-content?