CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了css – flex项目的`display`属性的允许值是多少? (flex-item的子项布局无关紧要)大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
Flex容器的所有子容器(由display:flex或display:inline-flex指定)都是自动生成的flex项. Flex项目没有显示属性;相反,我们将其设置为其他值,具体取决于我们希望如何布置Flex项目的子项.

所以,如果我在Y元素上设置显示为X值(虑到Y参与flex上下文,即Y是一个flex项),我可以确定我将始终获得行为的flex项(在这个格式化上下文中,在flex容器中)就像块级元素一样?

(换句话说,无论X = block / inline / table-cell / inline-grid / …等,Y都参与块格式化上下文,对吧?)

> X – 非块值
> Y – flex-item,html元素

这个:

<div id="flex-container" style="display:flex">
    <div id="flex-item" style="display: inline;">item</div>
</div>

等于此(没有任何副作用)

<div id="flex-container" style="display:flex">
    <div id="flex-item" style="display: block;">item</div>
</div>

解决方法

成为 flex item的唯一条件是成为Flex容器的流入子.

请注意,这意味着可以将一个连续的文本行包装在一个与任何元素不对应的匿名弹性项目中,并且如果满足以下任何条件,则Flex容器的元素子级可能不是弹性项目

>这是absolutely positioned

>它有display: contents

它的子项将成为flex项目(除非此列表中的某些内容适用于它们).
>它有display: none

>它有box-suppress: discard

>它有box-suppress: hide

>以前,如果Flex容器的子级具有生成匿名父级的显示值,则该父级将成为弹性项而不是子级.这已更改,现在子项成为弹性项,并且不生成父项.

除此之外,是的,显示值不应该阻止元素成为弹性项目.

请注意,flex项目是blockified,因此例如内联块变为块,内联表变为表格,内联变量变为柔性等.

这意味着,无论指定的outer display role如何,flex项始终是块级的.

基本上,当在柔性项目上使用时,显示属性仅用于设置其inner display layout model,例如,您希望flex项目是其内容的Flex容器.

(术语略有不同,显示规范说灵活项目在其外部显示角色的意义上是块级别,Flexbox规范说它不是块级别,因为它参与的格式化上下文不是块一)

大佬总结

以上是大佬教程为你收集整理的css – flex项目的`display`属性的允许值是多少? (flex-item的子项布局无关紧要)全部内容,希望文章能够帮你解决css – flex项目的`display`属性的允许值是多少? (flex-item的子项布局无关紧要)所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。