Question

有意义的是，在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>

Answer 1

有意义的是，在align-items（基线）以下，基线最高的每一行中的项目将“向下移动”以满足最低的基线。

使用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）。因此，我们开始按照此规则放置第一项：

灵活启动

弹性项目的交叉起始边沿边缘与该行的交叉起始边缘齐平放置。 ^ref

然后我们放置第二个：

基线

flex项参与基线对齐：对齐该行上所有参与的flex项，以使其基线对齐，并且将其基线与其交叉起始边缘之间距离最大的项与之对齐线的交叉起始边缘。

因此，遵循这两个规则，将两个项目均置于与行的交叉起始边缘齐平。

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>

换句话说，将基线对齐应用于一个元素是没有用的，因为它是唯一会参与基线对齐的元素，并且在逻辑上将是 其基线和跨起点边缘之间的最大距离，它将被放置在顶部。

如果您至少有两个具有基线对齐的元素，您将看到一个区别：

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始终将始终位于顶部，并且永远不会参与基线对齐，并且仅考虑其他两个。

了解对齐项目：基线

1 个答案: