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

​

​

​

​

我想很快地澄清一些事情。

基线对齐位置的

，由行中最高的项确定。

我不确定我是否完全同意这一点。正如您所看到的，基线使这些项符合具有最大文本大小(字体大小)的项，而不是is最大的项。实际上，在本例中，文本最大的项恰好是集合中较小的元素之一。

在您的示例中，E是最大的元素，并且E也具有最大的字体大小。我希望这能帮助其他任何人真正磨练一些真正易碎的设计。干杯!