Question

为什么将margin设置为auto会破坏flexbox的基线对齐？

我想根据基线将标题与我称之为重音文本的标题对齐。它可以在容器上使用display: flex和align-items: baseline工作正常。

我还想删除标题左侧的边距，将标题右侧的边距设置为特定值，并将标题顶部和底部的边距保留为默认值（用户） -agent stylesheet）值。例如，h1 { margin: auto 1em auto 0; }这是它断开的地方，项目对齐似乎恢复为默认的拉伸。

现在，开发人员工具向我展示了当我将边距的顶部和底部值设置为auto时，它实际上以0的边距而不是我预期的结果。但是，当我实际上将顶部和底部边距设置为0（例如：margin: 0 1em 0 0）时，问题不会发生。

我已经看过如何通过单独设置margin-left和margin-right而不使用简写属性来解决此问题，但我希望能够更好地理解为什么会发生这种情况

header {
    background-color: #ffd;
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    margin: 0 1em 0 0;
}

h1 {
    margin: auto 1em auto 0;
}

<header>
  <h1>Heading</h1>
  <div class="accent">Accent Text</div>
</header>

Answer 1

auto margin's会覆盖灵活容器上设置的align-items / justify-content属性。

所以会发生什么，默认的上/下边距将被删除，然后h1将在其父级中垂直居中，而不是在基线处对齐。

如果你给header一个高度，就像我在fiddle demo中所做的那样，你会看到发生了什么。

要保持默认的上/下值，只需调整其左/右值。

Stack snippet

header {
    background-color: #ffd;
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    margin: 0 1em 0 0;
}

h1 {
    margin-right: 1em;             /*  changed  */
    margin-left: 0;                /*  changed  */
}

<header>
  <h1>Heading</h1>
  <div class="accent">Accent Text</div>
</header>

Answer 2

要注意的第一件事是，在横轴上设置了align-items边距的弹性项目会忽略Flex容器上的auto。（justify-content会被主轴设置auto边距的弹性项目忽略。“

8.1. Aligning with auto margins

如果可用空间分配到自动边距，则[关键字]对齐   属性[例如align-items和justify-content]在该维度中不起作用，因为边距会在弯曲后窃取剩余的所有可用空间。

第二件事需要注意的是align-items属性设置了弹性项目的默认align-self。 align-items: baseline表示所有弹性项目均为align-self: baseline，除非您覆盖特定项目的align-self。

8.3. Cross-axis Alignment: the align-items and align-self properties

Flex项目可以在当前行的交叉轴上对齐   flex容器，类似于justify-content但在垂直方向   方向。

align-items设置所有flex的默认对齐方式   容器的项目，包括匿名弹性项目。

align-self允许覆盖此默认对齐方式   个别弹性项目。

有关align-self覆盖的示例，请参阅此帖子：

How to disable equal height columns in Flexbox?

就您的代码而言......

header {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  margin: 0 1em 0 0;
  background-color: #ffd;  
}

h1 {
  margin: auto 1em auto 0;
}

<header>
  <h1>Heading</h1>
  <div class="accent">Accent Text</div>
</header>

......这就是发生的事情：

align-items: baseline / align-self: baseline会被h1忽略，因为它在横轴上有auto个边距。
align-items: baseline / align-self: baseline受到div的尊重，因为它没有auto页边距。

然后问题变成了，为什么div与容器的顶部对齐？

因为在一组具有基线对齐的弹性项目中，容器的交叉开始边缘（在这种情况下为上边缘）与项目的交叉开始边距（顶部边距）之间的距离最大的项目case），与交叉开始边缘齐平放置。

由于容器中只有一个具有基线对齐的项目，因此它会直接射到顶部。

8.3. Cross-axis Alignment: the align-items and align-self properties

<强> baseline

Flex项目参与基线对齐：所有参与   线上的柔性项目对齐，使其基线对齐，   和基线与其基线之间距离最大的项目   交叉开始边缘边缘与交叉开始边缘齐平放置   这条线。

有关此行为的清晰说明，请参阅此帖子：

What's the difference between flex-start and baseline?

Answer 3

Margin: auto;

以非常特殊的方式与flexbox进行交互。它的作用是将轴上所有剩余的空白空间添加到元素中。

您的问题来自于您将margin-top 和 margin-bottom设置为auto。这样做会导致所有空白空间在元素的顶部和底部边距之间分配均匀。

这也是为什么margin：auto将在flexbox中完美居中的原因。

您可以使用此jsfiddle查看更多保证金：auto如何与flexbox配合使用。

https://jsfiddle.net/kaoLkpgz/2/

替换任何保证金：0; .child与auto的值，您可以看到每个人与其他人的交互方式。

flexbox：保证金会影响基线吗？

3 个答案: