El problema
En algunos navegadores, el <button>elemento no acepta cambios en su displayvalor, más allá de cambiar entre blocky inline-block. Esto significa que un <button>elemento no puede ser un contenedor flexible o de cuadrícula, ni <table>tampoco un elemento.
Además de <button>los elementos, es posible que esta limitación se aplica a <fieldset>, y <legend>los elementos, también.
Consulte los informes de errores a continuación para obtener más detalles.
Nota: Aunque no pueden ser contenedores flexibles, los <button>elementos pueden ser elementos flexibles.
La solución
Existe una solución sencilla y sencilla para varios navegadores para solucionar este problema:
Envuelva el contenido del buttonen a spany haga el spancontenedor flexible.
HTML ajustado ( buttoncontenido envuelto en a span)
<div>
<button>
<span>
<span>Test</span>
<span>Test</span>
</span>
</button>
<p>
<span>Test</span>
<span>Test</span>
</p>
</div>
CSS ajustado (dirigido span)
button > span, p {
display: flex;
flex-direction: row;
justify-content: center;
}
Demo revisada
Referencias / informes de errores
Flexbox en un <button>bloquea el contenido pero no establece un contexto de formato flexible
Usuario (Oriol Brufau): Los elementos <button>secundarios de la están bloqueados, como dicta la especificación de flexbox. Sin embargo, <button>parece establecer un contexto de formato de bloque en lugar de uno flexible.
Usuario (Daniel Holbert): Eso es efectivamente lo que requiere la especificación HTML. Varios elementos de contenedor HTML son "especiales" e ignoran efectivamente su displayvalor CSS en Gecko [aparte de si es a nivel de línea o de bloque]. <button>es uno de estos. <fieldset>y <legend>son también.
Agregue soporte para visualización: diseño flexible / cuadrícula y conjunto de columnas dentro de <button>elementos
Usuario (Daniel Holbert):
<button>no es implementable (por navegadores) en CSS puro, por lo que son un poco como una caja negra, desde la perspectiva de CSS. Esto significa que no necesariamente reaccionan de la misma manera que, por ejemplo <div>
, a.
Esto no es específico de flexbox, por ejemplo, no representamos barras de desplazamiento si coloca overflow:scrollun botón, y no lo representamos como una tabla si lo coloca display:table.
Dando un paso atrás aún más, esto no es específico de <button>. Considere <fieldset>y <table>que también tienen un comportamiento de representación especial.
Y elementos HTML del período antiguo como <button>y <table>y <fieldset>simplemente no son compatibles personalizados displayvalores, excepto para los efectos de responder a la pregunta de muy alto nivel de "Es este elemento a nivel de bloque o de nivel de línea", por las corrientes de otros contenidos en torno al elemento .
Ver también: