Html 什么'；flex start和基线之间的区别是什么？

使用flex align-*属性时，

flex start

和

baseline

之间有什么区别

下面的代码片段为

align-self:flex-start

和

align-self:baseline

提供了相同的输出

在哪些情况下，

align self:flex start

和

align self:baseline

的行为会有所不同

.flex容器{
颜色：白色；
显示：-webkit flex；
显示器：flex；
宽度：350px；
高度：200px；
背景颜色：黄色；
}
.弹性项目{
背景颜色：绿色；
宽度：50px；
最小高度：100px；
利润率：10px；
}
.项目1{
-webkit-align-self:flex-start；
自我校准：灵活启动；
}
.项目2{
-webkit自对准：柔性端；
自对准：柔性端；
}
.项目3{
-webkit-align-self:center；
自对准：居中；
}
.项目4{
-webkit-align-self：基线；
自我校准：基线；
}
.项目5{
-webkit-align-self：拉伸；
自我调整：伸展；
}

弹性起动
基线
柔性端
居中
伸展

请参见以下两幅图像。除了

align items

规则外，这两个项目的代码相同

align items:flex start

对齐项目：基线

使用

align items

或

align self

时，

flex start

值将在flex容器的起始边缘对齐flex items

baseline

值将弹性项与其内容的基线对齐

大多数字母“所在”的线，其下延伸的线

资料来源：

在许多情况下，如果项目之间的字体大小相同（如问题中），或者内容相同，则

flex start

和

baseline

将无法区分

但如果flex项目之间的内容大小不同，那么

基线

可能会产生显著的差异

就基线对齐的位置而言，这是由行中最高的项确定的

根据规范：

基线

弹性项目参与基线对齐：对齐线上所有参与的弹性项目，使其基线对齐，并且基线与其交叉起始边距边缘之间距离最大的项目与线的交叉起始边缘齐平放置

.flex容器{
颜色：白色；
显示器：flex；
高度：300px；
背景颜色：黄色；
证明内容：之间的空间；
调整项目：基线；
}
.弹性项目{
背景颜色：绿色；
宽度：110px；
最小高度：100px；
利润率：10px；
框大小：边框框；
填充物：5px；
文本对齐：居中；
}
.item1{字体大小：2em；}
.item2{字体大小：7em；}
.item3{字体大小：.5em；}
.item4{字体大小：3em；}
.item5{字体大小：10em；}
/*
.item1{align self:flex start；}
.item2{align self:flex end；}
.item3{align self:center；}
.item4{align self:baseline；}
.item5{align self:stretch；}
*/
#虚线{
边框：1px红色虚线；
位置：绝对位置；
宽度：100%；
顶部：170px；
}

A.
B
C
D
E

我想很快澄清一些事情

根据基线对齐的位置，由 行中最高的项目

我不确定我是否完全同意这一点。如您所见，基线会使这些项目与最大文本大小（字体大小）的项目保持一致，而不是最大的项目。事实上，本例中文本最大的项恰好是集合中较小的元素之一

在您的示例中，E是最大的元素，E的字体大小也最大。我希望这有助于其他人真正磨练一些真正脆的设计。

---

干杯

这基本上是一个体面的回答，或多或少地回答了这个问题。但有一个主要缺陷：规范中提到的“基线”与排版无关。这是关于flex容器基线的：。因此，如果内容在任何单个框中超过一行文本，那么您在这里给出的示例将不起作用。看这个演示：我自己还没有完全理解它。但请看此演示：。它似乎是创建基线的第一行文本（或其他内联元素）。在该示例中，每个框上的第一个字母（因此，第一行）大小不同，但“基线”始终位于第一行下方，而不管每个框的文本大小。在第一个演示和第二个演示中，基线对齐似乎是每个框中的第一行文本。排版看起来很重要，但我同意你的看法，那还远远不够清晰@顺便说一句，这些年来我从中学到了很多。我两年前也引用过你的话。谢谢，继续努力@路易丝，哈，很好，谢谢你的叫喊声！是的，你是对的，基线值部分是关于排版，但我想说的是更多的是关于HTML中的内联元素。这个演示演示了：。我为每个字符使用了内联块元素，甚至在第二个字符中添加了顶部填充。所以基线仍然以同样的方式排列第一行。非常感谢分享您的知识！我的荣幸。我的中间名也是阿米尔：）