Flexbox ne fonctionne pas sur les éléments de bouton ou de jeu de champs

J’essaie de centrer les éléments internes d’une étiquette

Test Test

Et un jsfiddle: http://jsfiddle.net/z3sfwtn2/2/

Le problème est que l’élément n’est pas conçu pour être un conteneur Flex (ou Grid).

Au moment d’écrire ces lignes, les navigateurs Webkit (Chrome et Safari) respectent ce principe de conception. Firefox et Edge ne le font pas. Je n’ai pas testé d’autres navigateurs.

Par conséquent, vous ne devriez pas avoir de problème pour faire d’un élément un conteneur flexible (ou de grid) dans Firefox et Edge. Mais ne vous attendez pas à ce qu’il fonctionne dans Chrome ou Safari.

Ce comportement s’applique actuellement à au moins trois éléments:



Je théorise, mais je pense que l’idée est de maintenir un niveau de bon sens lors de la conception d’éléments HTML. Par exemple, les dieux HTML voulaient empêcher les auteurs de tourner un bouton dans une table.

Cependant, du moins dans ce cas, il existe une solution simple et facile :

Enveloppez le contenu du button dans une span et transformez le conteneur en conteneur flexible.

HTML ajusté (contenu du button enveloppé dans une span )

 

Test Test

CSS ajusté ( span ciblée)

 button > span, p { display: flex; flex-direction: row; justify-content: center; } 

Démo révisée

REMARQUE: Bien qu’ils ne puissent pas être des conteneurs flexibles, les éléments de button peuvent être des éléments flexibles.

Les références:

  • Bug 984869 – display: flex ne fonctionne pas pour les éléments de bouton
  • Bogue 1176786 – Flexbox sur a bloque le contenu mais n’établit pas de contexte de formatage flexible
  • Bogue n ° 10 – Certains éléments HTML ne peuvent pas être des conteneurs de grid

Voici mon hack le plus simple.

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