CSS Flexbox 中安全/不安全的对齐方式
我最近看了 Rachel Andrews 的演讲锦上添花:重新定义 CSS 的技术潜力。Rachel 的演讲总是能清晰而简洁地传达出满满的干货。这次演讲中有一行 CSS 代码是我从未见过的。
.something {
display: flex;
// 👇 这是什么操作?😲
align-items: safe center;
}
复制代码
CSS 的数据防丢目标
Rachel 解释说,在制定 CSS 规范时,其中一条关键原则就是防止数据丢失。我还是第一次听说这种说法。我们在 CSS 中遇到数据丢失的频率如何?做了哪些预防措施?
CSS 的使命是让访问者看到内容和元素。CSS 就是为此而生的。容器会根据内容自动向右或向下扩展。当内容超出范围,容器进入可滚动状态。除非你用 overflow: hidden; 禁用了这一功能,否则,用户可以通过滚动看到容器范围之外的内容。
我了解到,当使用 Flexbox 时,在某些情况下无法防止数据丢失。
CSS Flexbox 上下文中的数据丢失
假设有下列 HTML 代码:
CSS
is
awesome!
复制代码
搭配如下 CSS 代码:
.container {
display: flex;
flex-direction: column;
align-items: center;
}
复制代码
align-items 属性将子元素沿着交叉轴(Cross axis)居中对齐。这没什么问题,但如果容器/视口的尺寸比较小,就会导致数据丢失。
由于 Flexbox 的对齐机制,子元素无论如何都是居中的。子元素的左侧和右侧发生了溢出。问题是,左侧的溢出部分在视口的起始边缘以外。你无法通过滚动来显示这一部分 —— 这样就发生了数据的丢失。
在这种情况下,align-items 属性的 safe 关键词就派上用场了。The CSS Box Alignment Module Level 3(仍处于草稿状态)中对安全对齐是这样定义的:
“安全” 的对齐方式在溢出时改变了对齐模式,以避免数据丢失。
如果你定义了 safe 对齐方式,那么会在发生溢出时按照 start 方式来对齐元素。
.container {
display: flex;
flex-direction: column;
align-items: safe center;
}
复制代码
safe 对齐方式让浏览器总是把元素放在用户能看到的地方。
safe 对齐的浏览器支持情况
仅有 Firefox 支持 safe 关键字,暂未实现跨浏览器支持。我不推荐现在就使用它,因为它无法优雅地降级。你可以说这种安全方式本应该是 align-items 属性默认支持的,但我也没辙,CSS 确实有些难以驯服。而制定 CSS 规范就更复杂了。🤷🏻♂️
那我们当下如何防止数据丢失?
Bramus Van Damme 指出,在 flex 子元素上应用 margin: auto; 即可解决问题,不需要用 safe 关键字。🎉
有问题而不自知
我从没想到居中对齐会导致数据丢失。本文讨论的案例展示了 CSS 规范和布局有多么复杂。为制定规范辛勤付出的人们,我向你们致以最崇高的敬意!
困难只是暂时的,会有那么一天,安全对齐的跨浏览器支持全面普及,让我们拭目以待吧。👋🏻
如果发现译文存在错误或其他需要改进的地方,欢迎到 掘金翻译计划 对译文进行修改并 PR,也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。
掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域,想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。