flex-start 和 baseline 有什么区别？

Question

使用 flex align-* 属性时，flex-start 和 baseline 有什么区别？

下面的代码片段为 align-self: flex-start 和 align-self: baseline 提供了相同的输出。

在哪些情况下 align-self: flex-start 和 align-self: baseline 会有不同的表现？

.flex-container {
  color: white;
  display: -webkit-flex;
  display: flex;
  width: 350px;
  height: 200px;
  background-color: yellow;
}
.flex-item {
  background-color: green;
  width: 50px;
  min-height: 100px;
  margin: 10px;
}
.item1 {
  -webkit-align-self: flex-start;
  align-self: flex-start;
}
.item2 {
  -webkit-align-self: flex-end;
  align-self: flex-end;
}
.item3 {
  -webkit-align-self: center;
  align-self: center;
}
.item4 {
  -webkit-align-self: baseline;
  align-self: baseline;
}
.item5 {
  -webkit-align-self: stretch;
  align-self: stretch;
}

<div class="flex-container">
  <div class="flex-item item1">flex-start</div>
  <div class="flex-item item4">baseline</div>
  <div class="flex-item item2">flex-end</div>
  <div class="flex-item item3">center</div>
  <div class="flex-item item5">stretch</div>
</div>

Answer 1

看下面两张图。除了 align-items 规则外，两者的代码相同。

`align-items: flex-start`

`align-items: baseline`

当使用 align-items 或 align-self 时，flex-start 值将在弹性容器的起始边缘对齐弹性项目。

baseline 值将使弹性项目沿其内容的基线对齐。

baseline

The line upon which most letters "sit" and below which descenders extend.

^{Source: Wikipedia.org}

在很多情况下，当项目之间的字体大小相同（如问题中），或者内容在其他方面相同时，flex-start 和 baseline 将无法区分。

但是如果弹性项目的内容大小不同，那么 baseline 会产生明显的差异。

就基线对齐发生的位置而言，这由行中最高的项目决定。

来自规范：

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

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.

.flex-container {
  color: white;
  display: flex;
  height: 300px;
  background-color: yellow;
  justify-content: space-between;
  align-items: baseline;
}
.flex-item {
  background-color: green;
  width: 110px;
  min-height: 100px;
  margin: 10px;
  box-sizing: border-box;
  padding: 5px;
  text-align: center;
}
.item1 {  font-size: 2em;  }
.item2 {  font-size: 7em;  }
.item3 {  font-size: .5em; }
.item4 {  font-size: 3em;  }
.item5 {  font-size: 10em; }

/*
.item1 {  align-self: flex-start; }
.item2 {  align-self: flex-end; }
.item3 {  align-self: center; }
.item4 {  align-self: baseline; }
.item5 {  align-self: stretch; }
*/

#dashed-line {
  border: 1px dashed red;
  position: absolute;
  width: 100%;
  top: 170px;
}

<div class="flex-container">
  <div class="flex-item item1">A</div>
  <div class="flex-item item2">B</div>
  <div class="flex-item item3">C</div>
  <div class="flex-item item4">D</div>
  <div class="flex-item item5">E</div>
</div>

<div id="dashed-line"></div>

jsFiddle version

Answer 2

我想很快澄清一些事情。

In terms of where baseline alignment occurs, that is determined by the tallest item in the row.

不确定我是否完全同意这里的所有应有尊重。如您所见，基线导致这些项目坚持具有最大文本大小（字体大小）的项目，而不是是的项目最大的。事实上，在这种情况下，文本最大的项目恰好是集合中较小的元素之一。

在您的示例中，E 是最大的元素，并且 E 的字体大小也是最大的。我希望这可以帮助其他任何人真正磨练一些非常脆的设计。干杯！

flex-start 和 baseline 有什么区别？

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

html

css

flexbox

`align-items: flex-start`

`align-items: baseline`

jsFiddle version