- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
在使用 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>
最佳答案
请看下面两张图片。除了 align-items
规则外,两者的代码是相同的。
对齐元素:flex-start
对齐元素:基线
当使用 align-items
或 align-self
时,flex-start
值将在 cross-axis 的起始边缘对齐 flex 元素 flex 容器。
baseline
值将使 flex 元素沿其内容的baseline 对齐。
The line upon which most letters "sit" and below which descenders extend.
Source: Wikipedia.org
在许多情况下,当元素之间的字体大小相同(如问题中),或者内容在其他方面相同时,flex-start
和 baseline
将无法区分。
但是如果内容大小因 flex 元素而异,那么 baseline
会产生明显的差异。
就基线对齐发生的位置而言,这由行中最高的元素决定。
来自规范:
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>
关于html - flex-start 和 baseline 有什么区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34606879/
当使用浏览器网络检查器时,我遇到了 CSS 属性 vertical-align 的两个不同的非标准属性。 -webkit-baseline-middle 仅在 Chrome 中可用,而 -moz-mi
我似乎在观察 flexbox 的一些令人困惑的行为,特别是在尝试使用 align-self: baseline 时。基本问题是它根本行不通;以下片段演示了该问题: .flex-form { dis
在 align-items: baseline 下,每行中基线最高的元素将“向下移动”以满足最低基线。 为什么当我只制作 item2 align-self: baseline; 时没有明显的变化?我可
零基础入门数据挖掘 - 二手车交易价格预测 赛题理解 比赛要求参赛选手根据给定的数据集,建立模型,二手汽车的交易价格. 赛题以预测二手车的交易价格为任务,数据集报名后可见并可下载,该数据
如何恢复到较早的基线?我们有一个 UCM 并行开发(多流)项目。每个开发人员都有一个关于 Project 集成流的快照 View 。 开发人员希望在他们的快照 View 中看到应用程序的早期版本,以便
我想创建一个如下所示的布局: (虚线是 TextView 的基线。) 所以主 anchor 是大的W,然后abc基线对齐到W,然后是def 高于 abc。 但是当我为 abc 设置基线对齐方式时,de
我只是从 HTML 和 CSS 开始 我想使用 Border-left 画一条线,但显示线比我画的 div 框短(如图所示)the line is not touch with baseline bo
如果有人对问题有更好的措辞,请编辑,我正在努力寻找答案时甚至搜索什么。 我有多行,每行三列。每列都有一个标题和描述。长度是动态的,我想将它们全部对齐到中间。但是,我希望所有内容均匀对齐 - 因此标题排
我遇到了一个问题,其中“align-item: baseline;”在 Safari 中不起作用。它适用于 Chrome 和 Firefox。这是错误还是我遗漏了什么? 代码笔:https://cod
我正在为基线标注器编写代码。基于 Brown 语料库,它为单词分配了最常见的标签。因此,如果单词“works”被标记为动词 23 次,被标记为复数名词 30 次,那么根据用户输入的句子,它会被标记为复
有些定义让我感到困惑...我发现文本的 anchors.baseline 与矩形的不同.. 为什么?基线的定义是什么?谢谢... Item { width: 400; height: 200
我无法理解以下来自 10 Visual formatting model details– W3C 的摘录. 节选: baseline: Align the baseline of the box w
Flutter-ffmpeg无法设置配置文件参数。 (我需要使用配置文件,以便可以在 WhatsApp 上播放渲染的视频)。 我正在将.bmp 图像转换为 mp4 视频。其他我已经测试了其他参数并且工
我想要一个短语,它有不同的字体大小,所有字体大小都在底部对齐,所以我做了以下事情: const styles = StyleSheet.create({ head
我在 Google Colab 中运行了以下代码: from baselines.common.atari_wrappers import make_atari, wrap_deepmind
我正在使用ggplot,如下所述 Smoothed density estimates 并在R控制台中输入 m <- ggplot(movies, aes(x = rating)) m + geom_
我们使用 Azure 托管许多(100 多个)具有相同设置的 SQL Azure 数据库。 Azure 安全中心每周执行一次漏洞扫描。目前,我们需要为每个单独的数据库设置基线。例如,每次添加一个新数据
我尝试将复选框与 EditText 右侧对齐。问题是,如果我按照自己的方式这样做,就会产生循环依赖。 我想在 EditTexts 的基线处对齐 Powerbox 和 Landline 复选框。 目前我
在使用 flex align-* 属性时,flex-start 和 baseline 有什么区别? 下面的代码片段为 align-self: flex-start 和 align-self: base
我正在使用这个模板:http://fluidbaselinegrid.com/创建流体网格来布局我的个人网站。并非我所有的网格都是高度,有时我会得到错误的位置。 [1]. 技能部分应位于博客文章 5
我是一名优秀的程序员,十分优秀!