Css flexstart 和基线有什么区别

发布于01月05日

在使用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或align-self时，值flex-start将在柔体容器的cross-axis的起始边对齐柔体项目.

baseline个的值将使flex项目沿着其内容的baseline对齐.

baseline

大多数字母"坐"在其上，下降的字母延伸到其下方的那条线.

个

^{来源:Wikipedia.org}

在许多情况下，当项目之间的字体大小相同(如问题中的字体大小)，或者内容在其他方面相同时，则flex-start和baseline个将无法区分.

但如果flex项目的内容大小不同，那么baseline个可能会产生明显的差异.

就基线对齐的位置而言，这是由行中最高的项目确定的.

From the spec:个

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

baseline个

弹性项参与基线对齐:行上所有参与的弹性项都会进行对齐，以便它们的基线对齐，并且其基线与交叉起始边距边缘之间距离最大的项目将与该行的交叉起始边缘对齐.

.flex-container {
  color: white;
  display: flex;
  height: 300px;
  background-color: yellow;
  justify-content: space-between;
  对齐-项目:基线;
}
.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>

Css flexstart 和基线有什么区别

推荐答案

`对齐项目:flex start`

`对齐-项目:基线`

jsFdle版本

Css相关问答推荐

如何将bslib：：card()中的扩展按钮移到右上方，其中full_screen = TRUE？

如何允许在bslb中 Select 输入重叠卡片？

MUI Textfield-悬停时输入标签 colored颜色

ReactJS 连续循环动画滚动

Puppeteer - 无法在wine 店网站中拉出正确的 CSS Select 器

2 列 UL，右列中的列表项数量为奇数？

使元素在顶部和中心都有粘性

如何给三角形添加渐变？

如何让我的 CSS 代码响应小屏幕？

在 css Select 器中匹配 unicode char

当计算的宽度不准确时，如何在 cypress 中测试元素的宽度？

使用 MUI 动态绘制多个边框

创建一条淡出/在各个方向变得透明的线

你可以在 CSS 中扩展实体(entity)吗？

我应该避免使用text-align： justify;吗？

如何将 textarea 宽度扩展到父级宽度的 100%(或如何将任何 HTML 元素扩展到父级宽度的 100%)？

悬停效果：展开底部边框

可见性：隐藏 vs 显示：无 vs 不透明度：0

仅当存在 2 个类时，您可以使用 CSS 定位元素吗？

谷歌的无图像按钮