Flex / Grid layouts not working on button or fieldset elements

调整后的CSS(定位为span)

修改后的演示

参考/错误报告

上的Flexbox会阻止内容，但不会建立Flex格式化上下文

User (Oriol Brufau): The children of the

are blockified, as dictates the flexbox spec. However, the seems to establish a block formatting context instead of a flex one.

User (Daniel Holbert): That is effectively what the HTML spec requires. Several HTML container-elements are"special" and effectively ignore their CSS display value in Gecko [aside from whether it's inline-level vs. block-level].

is one of these.

&

are as well.

在

元素内添加对display：flex / grid和columnset布局的支持

User (Daniel Holbert):

is not implementable (by browsers) in pure CSS, so they are a bit of a black box, from the perspective of CSS. This means that
they don't necessarily react in the same way that e.g. a
would.

This isn't specific to flexbox -- e.g. we don't render scrollbars if you put overflow:scroll on a button, and we don't render it as a
table if you put display:table on it.

Stepping back even further, this isn't specific to

. Consider

and

which also have special rendering
behavior.

And old-timey HTML elements like and

and

simply do not support custom display values, other than
for the purposes of answering the very high-level question of"is this
element block-level or inline-level", for flowing other content around
the element.

另请参阅：

• Flexbug＃9：某些HTML元素不能是Flex容器
• 10.一些HTML元素不能是网格容器

相关讨论

• 我知道为什么它可能不适用于，但是为什么它也不适用于
  ？不应将该元素视为对flex容器有效的常规块级元素吗？
• @fritzmg。同意该规则可能预先存在CSS3技术，例如Flex和Grid，应该重新评估。
• 因此，我们希望防止按钮被滥用...但是仍然可以滥用其他东西并将其放置在按钮内部。听起来和网络其他部分一样逻辑...
• 在2019年找到此线程并注意到在Chrome 76和Safari 12.1中可作为flex-container很好地工作。但是当按钮是display:grid的子代时，两者都是错误的。参见codepen.io/urlyman/pen/rXqmqY。 Firefox 68支持。
• 您是否引用了而不被设计为Flex(或网格)容器？似乎浏览器将无法设置这些元素的显示视为错误，并正在积极修复它们。
• @Michael_B考虑在创建断言的地方添加对实际文本的引用。无需回复我的评论-如果您将其添加到提出断言的文本中，那么我将给予您反对。
• 同样为什么按钮内的div不是有效的HTML？
• div不能是button的子级，因为如果您在老式HTML中认为它，则块级元素不能是内联级元素的子级。但是今天，对于HTML5，技术上正确的答案是button元素只能接受短语内容。 span表示短语内容，但div则不。 div表示流内容。更多细节
• 难以置信的！ :)

---

这是我最简单的技巧。

1 2 3 4 5

button::before, button::after {     content: '';     flex: 1 0 auto; }