在 align-items: baseline 下，每行中基线最高的元素将“向下移动”以满足最低基线。
为什么当我只制作 item2 align-self: baseline; 时没有明显的变化？我可以看到 spec但我实际上很难理解它。
html {
font-family: "Ranchers";
font-size: 16px;
}
#flex-container {
display: flex;
width: 300px;
height: 400px;
border: 10px solid black;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
align-items: flex-start;
}
#flex-container > div:nth-child(1) {
padding: 10px;
border: solid black 5px;
margin: 8px;
flex-basis: auto;
width: 150px;
height: 100px;
}
#flex-container > div:nth-child(2) {
padding: 3px;
border: solid black 10px;
border-top: solid black 20px;
margin: 4px;
align-self: baseline;
}
#flex-container > div:nth-child(3) {
padding: 10px;
border: solid black 10px;
flex-basis: auto;
width: 150px;
}<head>
<link href="https://fonts.googleapis.com/css2?family=Ranchers&display=swap" rel="stylesheet">
</head>
<div id="flex-container">
<div style="background-color: blue;">I am div 1.</div>
<div style="background-color: red;">I am div 2</div>
<div style="background-color: green;">I am div 3</div>
</div>最佳答案
It makes sense that under align-items: baseline, the items on each row whose baselines appear the highest will 'shift down' to meet the lowest baseline.
使用 align-items: baseline 会给你一个直观的结果，因为它会将基线对齐应用于所有元素(我坚持所有)。所以它的结果将与将 align-self:baseline 应用于所有元素相同
html {
font-family: "Ranchers";
font-size: 16px;
}
#flex-container {
display: flex;
width: 300px;
height: 400px;
border: 10px solid black;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
}
#flex-container>div:nth-child(1) {
padding: 10px 0;
border: solid black 5px;
margin: 8px;
flex-basis: auto;
width: 150px;
height: 100px;
align-self: baseline; /* here */
}
#flex-container>div:nth-child(2) {
padding: 3px;
border: solid black 10px;
border-top: solid black 40px;
margin: 4px;
align-self: baseline; /* here */
}
#flex-container>div:nth-child(3) {
padding: 10px;
border: solid black 10px;
flex-basis: auto;
width: 150px;
}<head>
<link href="https://fonts.googleapis.com/css2?family=Ranchers&display=swap" rel="stylesheet">
</head>
<div id="flex-container">
<div style="background-color: blue;">I am div 1.</div>
<div style="background-color: red;">I am div 2</div>
<div style="background-color: green;">I am div 3</div>
</div>现在，仅将基线应用于一个元素是另一回事，因为另一个元素将具有其默认对齐方式或由 align-items(即 flex-start在你的情况下)。所以我们开始按照这个规则放置第一个元素:
flex-start
The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line. ref
然后我们放置第二个:
baseline
The flex item participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line.
因此，按照这两个规则，两个元素都被放置与线的交叉起点边缘齐平。
html {
font-family: "Ranchers";
font-size: 16px;
}
#flex-container {
display: flex;
width: 300px;
height: 400px;
border: 10px solid black;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
align-items:flex-start;
}
#flex-container>div:nth-child(1) {
padding: 10px 0;
border: solid black 5px;
margin: 8px;
flex-basis: auto;
width: 150px;
height: 100px;
}
#flex-container>div:nth-child(2) {
padding: 3px;
border: solid black 10px;
border-top: solid black 40px;
margin: 4px;
align-self: baseline; /* here */
}
#flex-container>div:nth-child(3) {
padding: 10px;
border: solid black 10px;
flex-basis: auto;
width: 150px;
}<head>
<link href="https://fonts.googleapis.com/css2?family=Ranchers&display=swap" rel="stylesheet">
</head>
<div id="flex-container">
<div style="background-color: blue;">I am div 1.</div>
<div style="background-color: red;">I am div 2</div>
<div style="background-color: green;">I am div 3</div>
</div>换句话说，将基线对齐应用于一个元素是无用的，因为它是唯一一个将参与基线对齐的元素，并且在逻辑上它将是具有 它的基线和它的 cross-start 边距边缘之间的最大距离，它将被放置在顶部。
如果您至少有两个元素具有基线对齐，您将看到不同之处:
html {
font-family: "Ranchers";
font-size: 16px;
}
#flex-container {
display: flex;
width: 300px;
border: 10px solid black;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
align-items:flex-start;
}
#flex-container>div:nth-child(1) {
padding: 10px 0;
border: solid black 5px;
margin: 4px;
flex-basis: auto;
height: 100px;
}
#flex-container>div:nth-child(2) {
padding: 3px;
border: solid black 10px;
border-top: solid black 40px;
margin: 4px;
align-self: baseline; /* here */
}
#flex-container>div:nth-child(3) {
padding: 10px;
border: solid black 10px;
align-self: baseline; /* here */
}<head>
<link href="https://fonts.googleapis.com/css2?family=Ranchers&display=swap" rel="stylesheet">
</head>
<div id="flex-container">
<div style="background-color: blue;">I am div 1.</div>
<div style="background-color: red;">I am div 2</div>
<div style="background-color: green;">I am div 3</div>
</div>
<div id="flex-container">
<div style="background-color: blue;">I am div 1.</div>
<div style="background-color: red;border-top:0">I am div 2</div>
<div style="background-color: green;padding-top:50px;">I am div 3</div>
</div>请注意在这两种情况下，蓝色 div 将始终位于顶部并且永远不会参与基线对齐，并且只考虑其他两个。
关于html - 了解对齐元素 : baseline，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64112081/