flex-start 和基线有什么区别? [英] What's the difference between flex-start and baseline?
问题描述
使用 flex align-* 属性时,flex-start
和 baseline
有什么区别?
下面的代码片段为 align-self: flex-start
和 align-self:baseline
提供相同的输出.
在哪些情况下 align-self: flex-start
和 align-self:baseline
的行为会不同?
.flex-container {白颜色;显示:-webkit-flex;显示:弹性;宽度:350px;高度:200px;背景颜色:黄色;}.flex-item {背景颜色:绿色;宽度:50px;最小高度:100px;边距: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:居中;对齐自我:居中;}.item4 {-webkit-align-self:基线;对齐自我:基线;}.item5 {-webkit-align-self:拉伸;对齐自我:伸展;}
<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>
请看以下两张图片.除了 align-items
规则外,两者的代码是相同的.
align-items: flex-start
align-items: 基线
当使用 align-items
或 align-self
时,flex-start
值将在 align-items
的起始边缘对齐弹性项目a href="https://stackoverflow.com/q/32551291/3597276">flex 容器的横轴.
baseline
值将沿其内容的基线对齐弹性项目.
在许多情况下,当项目之间的字体大小相同(如问题中),或者内容相同时,则 flex-start
和 baseline
将无法区分.
但是如果内容大小因弹性项目而异,那么 baseline
可以产生明显的差异.
就基线对齐发生的位置而言,由行中最高的项目决定.
来自规范:
<块引用>8.3.跨轴对齐:align-items
和 align-self
属性
基线
flex item 参与基线对齐:线上所有参与的 flex item 对齐,使得它们的基线对齐,并且其基线和它的 cross-start margin 之间距离最大的 item 被放置在与交叉对齐的位置线的起始边缘.
.flex-container {白颜色;显示:弹性;高度:300px;背景颜色:黄色;对齐内容:间隔;对齐项目:基线;}.flex-item {背景颜色:绿色;宽度:110px;最小高度:100px;边距:10px;box-sizing: 边框框;填充:5px;文本对齐:居中;}.item1 { 字体大小:2em;}.item2 { 字体大小:7em;}.item3 { 字体大小:.5em;}.item4 { 字体大小:3em;}.item5 { 字体大小:10em;}/*.item1 { align-self: flex-start;}.item2 { align-self: flex-end;}.item3 { 对齐自我:居中;}.item4 { align-self: 基线;}.item5 { align-self: 拉伸;}*/#虚线{边框:1px 红色虚线;位置:绝对;宽度:100%;顶部:170px;}
<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 id="dashed-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.
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
andalign-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
这篇关于flex-start 和基线有什么区别?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!