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值将在flex容器的横轴的起始边缘对齐flex项目.

该baseline值将使flex项目沿其内容的基线对齐.

底线

大多数字母"坐"的线和下方延伸的线.

^{来源:Wikipedia.org}

在许多情况下,当字体大小是项之间的相同(如在问题),或者该内容是否则相同的,那么flex-start与baseline将无法区分.

但是,如果内容大小因弹性项目而异,那么baseline可以产生明显的差异.

就发生基线对齐的位置而言,这取决于行中最高的项目.

从规格:

8.3.交叉轴对齐:align-items和align-self 属性

baseline

flex项目参与基线对齐:线上的所有参与的flex项目都对齐,使其基线对齐,并且其基线与其交叉开始边缘边缘之间距离最大的项目与交叉开始边缘齐平.这条线.

.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版本