在 CSS Flex/Grid 中使用带有 `justify-content`、`justify-items` 或 `justify-self` 的 `baseline` 值是否有意义? [英] Does it make any sense to use `baseline` value with `justify-content`, `justify-items` or `justify-self` in CSS Flex/Grid?

问题描述

MDN align-content, justify-content 和 justify-items 将 baseline 描述为它们的可能值之一.虽然 baseline 在与 align-items 或 align-self 一起使用时有意义，但我不明白它如何与 justify-content、justify-items、justify-self 和 align-content 属性.你有什么建议吗?

解决方案

这里的 MDN 不准确，因为 justify-content

没有基线

如果您查看实际的 Flexbox 规范将看到 justify-content

没有 baseline 值

值:flex-start |柔性端|中心 |间隔|环绕空间

在不久的将来，如 CSS 框对齐模块级别 3 中所定义 我们将有更通用的方法来对齐元素，即使 baseline 是一个无效的 justify-content 值

值:正常 |<内容分发>|<溢出位置>?[ <内容位置>|左 |对 ]<内容分发>= 间隔 |周围空间|空间均匀|拉紧<溢出位置>= 不安全 |安全的<内容位置>= 中心 |开始 |结束 |弹性启动 |柔性端

<小时>

顺便说一下，新规范中有 justify-items 的 baseline:https://drafts.c​​sswg.org/css-align-3/#propdef-justify-items 但这个属性没有存在于实际的 Flexbox 规范中(与 justify-self 相同)

相关:在 CSS Flexbox 中，为什么没有justify-items"?和证明自我"属性?

align-content 不接受带有 Flexbox 的 baseline (https://drafts.c​​sswg.org/css-flexbox-1/#align-content-property) 但它在 新规范

<小时>

同样适用于 CSS 网格，但您可以在那里找到 justify-items 和 justify-self:https://www.w3.org/TR/css-grid-1/#row-align

实际上我没有一个明确的例子来说明具有这些属性的 baseline 但我很确定在大多数情况下它会考虑规范中定义的回退值:

MDN align-content, justify-content and justify-items describe baseline as one of their possible values. While baseline makes sense when is used with align-items or align-self, I don't get how it could work along with justify-content, justify-items, justify-self and align-content properties. Do you have any suggestions?

解决方案

The MDN is not accurate here as there is no baseline for justify-content

If you check the actual Flexbox specification you will see that there is no baseline value for justify-content

Value:  flex-start | flex-end | center | space-between | space-around

In the near future and as defined in the CSS Box Alignment Module Level 3 we will have more generic way to align elements and even there baseline is a not a valid value of justify-content

Value:  normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]

<content-distribution> = space-between | space-around | space-evenly | stretch

<overflow-position> = unsafe | safe

<content-position> = center | start | end | flex-start | flex-end

---

By the way, there is baseline for justify-items in the new specificiation: https://drafts.csswg.org/css-align-3/#propdef-justify-items but this property doesn't exist in the actual Flexbox specification (same for justify-self)

Related: In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

align-content doesn't accept baseline with Flexbox (https://drafts.csswg.org/css-flexbox-1/#align-content-property) but it does in the New Specification

---

The same apply for CSS grid but you can find justify-items and justify-self there: https://www.w3.org/TR/css-grid-1/#row-align

Actually I don't have a clear example to illustrate the baseline with those properties but I am pretty sure in most of the case it will consider a fallback value as defined in the Spec:

这篇关于在 CSS Flex/Grid 中使用带有 `justify-content`、`justify-items` 或 `justify-self` 的 `baseline` 值是否有意义?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！