弹性启动和基线有什么区别？

在使用 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>

42709 次浏览
小开
最佳答案

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

align-items: flex-start

enter image description here

align-items: baseline

enter image description here

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.

enter image description here

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

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

小开

baseline

baseline

I wanted to clarify something really quick.

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

Not sure if I entirely agree here with all due respect. As you can see, the baseline causes these items to adhere to the item with the largest text size (font size), not the item that is the largest. In fact, the item with the largest text in this case, just so happens to be one of the smaller elements in the collection.

In your example, E was the largest element, and E also had the largest font size. I hope this helps anyone else really hone in on some really crispy designs. Cheers!


提交答案