Html flexbox：边距影响基线？

为什么将

margin

设置为

auto

会破坏flexbox的基线对齐

我想根据基线将标题与我称之为重音文本的内容对齐。使用容器上的

display:flex

和

align items:baseline

可以正常工作

我还想删除标题左侧的边距，将标题右侧的边距设置为特定值，并将标题顶部和底部的边距保留为默认值（用户代理样式表）。例如，

h1{margin:auto 1em auto 0；}

这是它中断的地方，项目对齐似乎恢复为默认的拉伸

现在，开发人员工具向我显示，当我将页边距的顶部和底部值设置为

auto

，它实际上以0结束，而不是我预期的值。但是，当我实际将上下页边距设置为0（例如：

页边距：0 1em 0

）时，问题不会出现

我已经看到了如何通过单独设置

左边距

和

右边距

来解决这个问题，而不使用速记属性，但我希望能够更好地理解为什么会发生这种情况

标题{
背景色：#ffd；
显示器：flex；
调整内容：灵活启动；
调整项目：基线；
边距：0.1米0；
}
h1{
边距：自动1em自动0；
}

标题
强调文字

以一种非常特殊的方式与flexbox交互。它所做的是获取其轴上所有剩余的空白空间，并将其添加到元素中

您的问题来自于您将“页边距顶部”和“页边距底部”都设置为“自动”。这样做会导致在元素的上下边距之间均匀地分配所有的空白空间

这也是为什么margin:auto会将一个元素完美地置于flexbox的中心

您可以使用这个jsfiddle来了解margin:auto如何与flexbox一起工作

替换任何边距：0；.child的值，您可以看到每个值如何与其他值交互。

覆盖flex容器上设置的

对齐项目

/

对齐内容

属性

因此，将删除默认的上/下边距，然后

h1

将垂直居中于其父级，而不是在基线处对齐

如果你给

标题

一个高度，就像我在这篇文章中做的那样，你会看到发生了什么

若要保留默认的顶部/底部值，请仅调整其左/右值

堆栈片段

标题{
背景色：#ffd；
显示器：flex；
调整内容：灵活启动；
调整项目：基线；
边距：0.1米0；
}
h1{
右边距：1em；/*已更改*/
左边距：0；/*已更改*/
}

标题
强调文字

首先要注意的是，横轴中设置了

自动
边距的flex项目会忽略flex容器上的
对齐项目。（
justify content
将被主轴中设置了
auto
页边距的弹性项目忽略）


如果将可用空间分配给自动边距，[关键字]对齐
属性[如
对齐项目
和
对齐内容
]在该维度中无效，因为边距会占用调整后剩余的所有可用空间


要注意的第二件事是
align items
属性设置弹性项目的默认
align self
<代码>对齐项目：基线
表示所有弹性项目上的
对齐自我：基线
，除非您覆盖特定项目的
对齐自我


弹性项目可以在项目当前行的横轴上对齐
flex容器，类似于
justify content
，但在垂直方向
方向

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

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

有关
align self
覆盖的示例，请参阅本帖：





就你的代码而言


标题{
显示器：flex；
调整内容：灵活启动；
调整项目：基线；
边距：0.1米0；
背景色：#ffd；
}
h1{
边距：自动1em自动0；
}

标题
强调文字
不确定这是不是解释。。。没有空白，所以auto和0的行为应该是相同的，除非你给容器增加额外的空间，否则这不是很明显，但flexbox就是这样处理空白的。一旦你了解了它是如何做到的，这就很好了，但一开始它可能会很混乱。另外，添加justify/align items样式可以更详细地显示它的工作原理：am不是OP:），也不是一个明显或不明显的问题。。。您正在解释边距是均匀分配的，但在这种情况下，没有空间分配任何边距，因此使用auto或0应提供相同的结果。。。但是，检查另一个答案，以了解保证金自动打破另一个属性；）我知道你不是OP。我从来没有这样称呼过你。利润率：汽车；不会破坏其他样式。它只是简单地应用在它上面。否则，您将无法在flex布局中为元素添加边距。此外，还有额外的空间。如果没有，则对齐项目：基线将不起作用。对齐项目：基线将所有剩余的空白置于元素上方。检查其他答案，您将了解：）边距自动覆盖另一个属性。。它与您解释的工作方式无关，也无法使用margin:auto和强制内容对齐/a
Margin: auto;