为什么不是所有的 flexbox 元素都表现得像 flexbox div? [英] Why are not all flexbox elements behaving like flexbox divs?

问题描述

为什么 flexbox 不能与 fieldset 或其他非 div 标签一起正常工作?我希望它们像 div 示例中那样彼此相邻排列，因为 flex-direction: row; 在 flexbox 中是默认的.但是 fieldset 是强制对它们应用宽度，我不明白为什么.

HTML

<div>fieldset flexbox</div><div>1</div><div>2</div></fieldset><div id="parentdiv"><div>div flexbox<div><div>3</div><div>4</div>

CSS:所有元素都设置为display: flex;

http://jsfiddle.net/c5BB5/1/

解决方案

据我所知，这归结于与 fieldset 元素有关的浏览器错误.

fieldset 元素的一个已知问题在 Chrome 中.Firefox 在那个 legend 中有一个类似的(非常古老的)问题code> 和 fieldset 是 替换元素.

<小时>

我想现在使用 <div role="group"> 而不是真正的字段集更安全.在您的 CSS 中，您可以使用 div[role='group'] 作为您的选择器.参见 http://www.deque.com/aria-group-viable-替代字段集图例了解更多信息.

Why is flexbox not working properly with fieldset or other non-div tags? I expect them to line up next to each other like in the div example, as flex-direction: row; is default in flexbox. However fieldset is force applying a width to them, and I do not understand why.

HTML

<fieldset>
    <div>fieldset flexbox</div>
    <div>1</div>
    <div>2</div>
</fieldset>

<div id="parentdiv">
    <div>div flexbox<div>
    <div>3</div>
    <div>4</div>
</div>

CSS: All elements are set to display: flex;

http://jsfiddle.net/c5BB5/1/

解决方案

As far as I can tell, this is down to browser bugs to do with the fieldset element.

It's a known issue with fieldset elements in Chrome. Firefox has a similar (very old) issue in that legend and fieldset are replaced elements.

---

I guess it's safer to use a <div role="group"> instead of a real fieldset for now. In your CSS you could use div[role='group'] as your selector. See http://www.deque.com/aria-group-viable-alternative-fieldset-legend for more information.

这篇关于为什么不是所有的 flexbox 元素都表现得像 flexbox div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！