英文:
What is the difference between baseline, first baseline, and last baseline in CSS?
问题
CSS属性align-items可以设置为baseline、first baseline和last baseline（CSS规范）。这些值之间有什么区别？
英文:
The CSS property align-items can be set to baseline, first baseline, and last baseline (CSS Spec). What are the differences between these values?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.flex-container {
color: white;
display: flex;
width: 300px;
height: 200px;
background-color: yellow;
}
.flex-item {
background-color: green;
width: 50px;
min-height: 100px;
margin: 10px;
}
.item1 {
align-self: flex-start;
}
.item2 {
align-self: baseline;
}
.item3 {
align-self: first baseline;
}
.item4 {
align-self: last baseline;
}
<!-- language: lang-html -->
<div class="flex-container">
<div class="flex-item item1">flex-start</div>
<div class="flex-item item2">baseline</div>
<div class="flex-item item3">first baseline</div>
<div class="flex-item item4">last baseline</div>
</div>
<!-- end snippet -->
答案1
得分: 2
"First baseline" 和 "baseline" 是同义词。
"First" 和 "last" 指的是弹性项目内的行框。最好的理解方法是通过一个示例：
section {
display: flex;
flex-wrap: wrap;
position: relative;
}
.first {
align-items: first baseline;
}
.last {
align-items: last baseline;
}
div {
flex: 1;
}
div:nth-child(2) {
font-size: 2.5em;
}
hr {
width: 80%;
}
/* 用于表示相关基线位置 */
section .baseline-indicator {
position: absolute;
border-bottom: 1px solid red;
width: 100%;
}
.first .baseline-indicator {
top: 36px;
}
.last .baseline-indicator {
top: 173px;
}
<section class="first">
<div>alpha<br>beta<br>gamma</div>
<div>delta<br>epsilon<br>zeta<br>eta</div>
<div>iota</div>
<div class="baseline-indicator"></div>
</section>
<hr>
<section class="last">
<div>alpha<br>beta<br>gamma</div>
<div>delta<br>epsilon<br>zeta<br>eta</div>
<div>iota</div>
<div class="baseline-indicator"></div>
</section>
我们可以从红色线条中看出，使用 first baseline 时，第一个文本行（即 "alpha"、"delta"、"iota"）的基线是对齐的。
而使用 last baseline 时，最后一个文本行（即 "gamma"、"eta"、"iota"）的基线是对齐的。
英文:
first baseline and baseline are synonyms.
"First" and "last" refer to the line boxes within the flex items. The best way to understand is with an example:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
section {
display: flex;
flex-wrap: wrap;
position: relative;
}
.first {
align-items: first baseline;
}
.last {
align-items: last baseline;
}
div {
flex: 1;
}
div:nth-child(2) {
font-size: 2.5em;
}
hr {
width: 80%;
}
/* to depict where the relevant baseline is */
section .baseline-indicator {
position: absolute;
border-bottom: 1px solid red;
width: 100%;
}
.first .baseline-indicator {
top: 36px;
}
.last .baseline-indicator {
top: 173px;
}
<!-- language: lang-html -->
<section class="first">
<div>alpha<br>beta<br>gamma</div>
<div>delta<br>epsilon<br>zeta<br>eta</div>
<div>iota</div>
<div class="baseline-indicator"></div>
</section>
<hr>
<section class="last">
<div>alpha<br>beta<br>gamma</div>
<div>delta<br>epsilon<br>zeta<br>eta</div>
<div>iota</div>
<div class="baseline-indicator"></div>
</section>
<!-- end snippet -->
We can see from the red lines that with first baseline, the baselines of the first text rows (i.e. "alpha", "delta", "iota") are aligned.
And with last baseline, the baselines of the last text rows (i.e. "gamma", "eta", "iota") are aligned.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论