flex-start和baseline之间有什么区别？ [英] What's the difference between flex-start and baseline?

问题描述

当使用flex align- *属性时， flex-start 和 baseline p>

下面的代码片段给出了 align-self：flex-start 和 align-自我：基线。

在这种情况下 align-self：flex-start 和 align-self：baseline 的行为不同？

  .flex-container {color：white;显示：-webkit-flex;显示：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>  

解决方案

查看以下两个图片。除了 align-items 规则，代码是完全相同的。

align-items：flex-start

align-items：baseline

使用 align-items 或 align-self ，则 flex-start

baseline 值会将flex项目沿其内容的基线对齐。

^{资料来源： Wikipedia.org}

在许多情况下，在项目之间是相同的（如在问题中），否则内容是相同的，则 flex-start 和 baseline



但是如果内容大小在flex项目之间有所不同，则 baseline 可以产生明显的差异。

在基线对齐的位置，由行中最高的项目决定。

8.3。交叉轴对齐： align-items 和 align-self
属性 a>

baseline

内联轴与横轴相同，此
值与 flex-start 相同。

否则，它参与基线对齐：线上所有参与的
flex项目都对齐，使得它们的基线对齐，
和基线与其
交叉之间具有最大距离的项目，

  .flex-container {color：white;显示：flex; height：300px;背景颜色：黄色; justify-content：空格; 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; } * /＃broken-line {border：1px broken red; position：absolute;宽度：100％; top：170px;}  

 < div class = -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 =dotted-line>< / div>  
 

jsFiddle版本

When working with flex align-* properties, what's the difference between flex-start and baseline?

The below code snippet gives same output for align-self: flex-start and align-self: baseline.

In which cases will align-self: flex-start and align-self: baseline behave differently?

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

解决方案

See the following two images. The code is identical for both, except for the align-items rule.

align-items: flex-start

align-items: baseline

When using align-items or align-self, the flex-start value will align flex items at the starting edge of the cross-axis of the flex container.

The baseline value will align flex items along their content's baseline.

baseline

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

^{Source: Wikipedia.org}

In many cases, when the font size is the same among items (like in the question), or the content is otherwise the same, then flex-start and baseline will be indistinguishable.

But if content size varies among flex items, then baseline can make a noticeable difference.

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

From the spec:

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

baseline

If the flex item’s inline axis is the same as the cross axis, this value is identical to flex-start.

Otherwise, it 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

这篇关于flex-start和baseline之间有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！