Flexbox düğmesi ya da fieldset öğeleri üzerinde çalışma yok

Question

<button>-etiketinin iç elemanlarını flexbox'ın justify-content: center ile ortalamaya çalışıyorum. Ama Safari onları ortalamıyor. Aynı stili başka etiketlere uygulayabilirim ve amaçlandığı gibi çalışır (bkz. <p> -tag). Sadece düğme sola hizalanmış.

Firefox veya Chrome'u deneyin ve farkı görebilirsiniz.

Üzerine yazmam gereken kullanıcı aracı stili var mı? Ya da bu problem için başka bir çözüm?

Ve jsfiddle: http://jsfiddle.net/z3sfwtn2/2/

Answer 1

sorun <button> eleman bazı tarayıcılarda bir esnek konteyner olamaz olmasıdır.

Tarayıcıya bağlı olarak, belirli HTML öğeleri display değişikliklerini kabul etmeyecektir. Bu unsurların üçü şunlardır:

• <button>
• <fieldset>
• <legend>

fikri HTML öğelerini stil zaman sağduyu seviyesini korumaktır. Örneğin, kural yazarların bir tarlayı bir tabloya dönüştürmelerini engeller.

Ancak bu durumda kolay bir çözümü vardır:

Çözüm: span içinde button arasında Wrap içeriği ve span esnek konteyner yapmak.

Düzeltilmiş HTML (a span sarılmış button içerik)

<div> 
    <button> 
     <span><!-- using a div also works but is not valid HTML --> 
      <span>Test</span> 
      <span>Test</span> 
     </span> 
    </button> 
    <p> 
     <span>Test</span> 
     <span>Test</span> 
    </p> 
</div> 

Düzeltilmiş CSS (span hedeflenen)

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

Revised Demo

NOT: Esnek kaplar olmamasına rağmen, button öğeleri esnek öğeler olabilir.

Referanslar:

• Bug 984869 - display: flex doesn't work for button elements
• Bug 1176786 - Flexbox on a blockifies the contents but doesn't establish a flex formatting context

Answer 2

İşte benim en basit kesmek olduğunu.

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