html css - ¿Por qué no <fieldset> pueden ser contenedores flexibles?




3 Answers

De acuerdo con Bug 984869 - display: flex no funciona para elementos de botón ,

<button> no es implementable (por los navegadores) en CSS puro, por lo que son un poco de un recuadro negro, desde la perspectiva de CSS. Esto significa que no necesariamente reaccionan de la misma manera que, por ejemplo, un <div> .

Esto no es específico de flexbox, por ejemplo, no renderizamos barras de desplazamiento si coloca overflow:scroll sobre un botón, y no lo rendericemos como una tabla si coloca display:table en él.

Dando un paso atrás aún más, esto no es específico de <button> . Considera <fieldset> y <table> que también tienen un comportamiento de reproducción especial:

data:text/html,<fieldset style="display:flex"><div>abc</div><div>def</div>

En estos casos, Chrome está de acuerdo con nosotros y no tiene en cuenta el modo de visualización flex . (como lo revela el hecho de que "abc" y "def" terminan apilados verticalmente). El hecho de que hagan lo que esperan en <button style="display:flex"> probablemente solo se deba a un detalle de implementación.

En la implementación del botón de Gecko, codificamos <button> (y <fieldset> , y <table> ) como tener una clase de trama específica (y, por lo tanto, una forma específica de diseñar los elementos secundarios), independientemente de la propiedad de display .

Si desea que los niños se organicen de forma fiable en un modo de diseño particular con un navegador cruzado, la mejor opción es utilizar un envoltorio-div dentro del botón, tal como lo necesitaría dentro de una <table> o a <fieldset> .

Por lo tanto, ese error fue marcado como "resolvió inválido".

También está Bug 1047590 - display: flex; no funciona en <fieldset> , actualmente "no confirmado".

Buenas noticias : Firefox 46+ implementa Flexbox para <fieldset> . Ver error 1230207 .

bootstrap formularios

Intenté fieldset un elemento fieldset con display: flex y display: inline-flex .

Sin embargo, no funcionó: flex comportó como un block y inline-flex comportó como inline-block .

Esto sucede tanto en Firefox como en Chrome, pero extrañamente funciona en IE.

¿Es un error? No pude encontrar que fieldset tenga un comportamiento especial, ni en HTML5 ni en las especificaciones de diseño de CSS Flexible Box .

fieldset, div {
    display: flex;
    border: 1px solid;
}
<fieldset>
    <p>foo</p>
    <p>bar</p>
</fieldset>
<div>
    <p>foo</p>
    <p>bar</p>
</div>




En mi experiencia, he descubierto que ni <fieldset> , ni <button> , ni <textarea> pueden usar display:flex o propiedades heredadas.

Como otros ya han mencionado, se han reportado errores. Si desea usar flexbox para controlar el orden (por ejemplo, order:2 ), entonces deberá envolver el elemento en un div. Si desea que flexbox controle el diseño y las dimensiones reales, entonces puede considerar usar un div, en lugar del control de entrada (Lo que apesta, lo sé).




puedes poner div adicional en <fieldset> con los siguientes accesorios:

flex-inner-wrapper {
  display: inherit;
  flex-flow: inherit;
  justify-content: inherit;
  align-items: inherit;
}



Related

html css css3 flexbox