Question

在Chrome和Safari中打开此页面，我们可以看到差异。

在Safari中，数学＆＃34;关键字不在Chrome的右侧。

此外，item-3 div的宽度在Chrome和Safari中也有所不同。

我的问题是为什么它在Safari中有所不同，修复是什么（我希望在item-3上修复CSS。）

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果您希望.item-3保持容器的整个宽度，请使用justify-content: flex-end。

＆＃13;

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

＆＃13;

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

＆＃13;

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容器中的文本被视为匿名弹性项。这允许justify-content工作。

4. Flex Items

Flex容器的每个in-flow子项都变为flex项，每个都是   连续运行的文本直接包含在flex中   容器包装在一个匿名的flex项目中。

为什么text-align: right无效

text-align: right无法正常工作，因为flex项（包括匿名项）被视为块级元素。 text-align属性仅适用于内联级内容。

更多信息

在此处了解有关主轴的柔性对齐的更多信息：

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

在此处了解有关十字轴的柔性对齐的更多信息：

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

Flex和自动边距在Chrome和Safari中表现不同

1 个答案: