在CSS Flex/Grid中将`baseline`值与`justify-content`，`justify-items`或`justify-self`一起使用是否有意义?

本文介绍了在CSS Flex/Grid中将`baseline`值与`justify-content`，`justify-items`或`justify-self`一起使用是否有意义?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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?

推荐答案

此处的MDN不准确，因为justify-content

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

如果您查看实际的Flexbox规范，则您会看到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

在不久的将来，并按照 CSS盒子对齐模块3级我们将有更通用的方式来对齐元素，即使baseline是justify-content

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

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

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)

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

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

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

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

实际上，我没有一个清晰的示例来说明具有这些属性的baseline，但我可以肯定，在大多数情况下，它将考虑Spec中定义的回退值:

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中将`baseline`值与`justify-content`，`justify-items`或`justify-self`一起使用是否有意义?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Drafts