Le problème
Dans certains navigateurs, l' <button>
élément n'accepte pas les modifications de sa display
valeur, au-delà du basculement entre block
et inline-block
. Cela signifie qu'un <button>
élément ne peut pas être un conteneur flex ou grid, ou a <table>
, non plus.
En plus des <button>
éléments, vous trouverez peut - être cette contrainte à appliquer <fieldset>
et les <legend>
éléments, aussi bien.
Voir les rapports de bogue ci-dessous pour plus de détails.
Remarque: bien qu'ils ne puissent pas être des conteneurs flexibles, les <button>
éléments peuvent être des éléments flexibles.
La solution
Il existe une solution de contournement simple et facile entre les navigateurs à ce problème:
Enveloppez le contenu du button
dans un span
et créez le span
conteneur flexible.
HTML ajusté ( button
contenu enveloppé dans un span
)
<div>
<button>
<span>
<span>Test</span>
<span>Test</span>
</span>
</button>
<p>
<span>Test</span>
<span>Test</span>
</p>
</div>
CSS ajusté (ciblé span
)
button > span, p {
display: flex;
flex-direction: row;
justify-content: center;
}
Démo révisée
Références / rapports de bogues
Flexbox sur un <button>
bloque le contenu mais n'établit pas de contexte de formatage flexible
Utilisateur (Oriol Brufau): Les enfants de <button>
sont bloqués, comme le dicte la spécification de la flexbox. Cependant, le <button>
semble établir un contexte de formatage de bloc au lieu d'un contexte flexible.
Utilisateur (Daniel Holbert): C'est effectivement ce qu'exige la spécification HTML. Plusieurs éléments de conteneur HTML sont "spéciaux" et ignorent effectivement leur display
valeur CSS dans Gecko [à part si c'est au niveau en ligne ou au niveau du bloc]. <button>
en fait partie. <fieldset>
& le <legend>
sont aussi.
Ajout de la prise en charge de l'affichage: disposition flex / grille et jeu de colonnes à l'intérieur <button>
éléments
Utilisateur (Daniel Holbert):
<button>
n'est pas implémentable (par les navigateurs) en CSS pur, ils sont donc un peu une boîte noire, du point de vue du CSS. Cela signifie qu'ils ne réagissent pas nécessairement de la même manière qu'un<div>
ferait.
Ce n'est pas spécifique à flexbox - par exemple, nous ne rendons pas les barres de défilement si vous placez overflow:scroll
un bouton, et nous ne le rendons pas sous forme de tableau si vous le mettez display:table
.
Pour revenir encore plus loin, ce n'est pas spécifique à <button>
. Considérez <fieldset>
et <table>
qui ont également un comportement de rendu spécial.
Et les anciens éléments HTML tels que <button>
et <table>
et <fieldset>
ne prennent tout simplement pas en charge les display
valeurs personnalisées , sauf pour répondre à la question de très haut niveau "est-ce que cet élément est au niveau du bloc ou en ligne", pour faire circuler d'autres contenus autour de l'élément .
Regarde aussi: