Tata letak Flex / Grid tidak berfungsi pada tombol atau elemen fieldset

Question 1

Saya mencoba untuk memusatkan elemen dalam dari <button>-tag dengan flexbox's justify-content: center. Tapi Safari tidak memusatkannya. Saya dapat menerapkan gaya yang sama ke tag lain dan berfungsi sebagaimana mestinya (lihat <p>-tag). Hanya tombol yang rata kiri.

Coba Firefox atau Chrome dan Anda dapat melihat perbedaannya.

Apakah ada gaya agen pengguna yang harus saya timpa? Atau solusi lain untuk masalah ini?

div {
  display: flex;
  flex-direction: column;
  width: 100%;
}
button, p {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

<div>
  <button>
    <span>Test</span>
    <span>Test</span>
  </button>
  <p>
    <span>Test</span>
    <span>Test</span>
  </p>
</div>

Luaskan cuplikan

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

Question 2

Masalah

Di beberapa browser, <button>elemen tidak menerima perubahan pada displaynilainya, selain beralih antara blockdan inline-block. Ini berarti bahwa <button>elemen tidak bisa menjadi wadah flex atau grid, atau <table>keduanya.

Selain <button>unsur-unsur, Anda mungkin menemukan kendala ini berlaku untuk <fieldset>dan <legend>elemen, juga.

Lihat laporan bug di bawah untuk lebih jelasnya.

Catatan: Meskipun tidak bisa menjadi wadah fleksibel, <button>elemen bisa menjadi item fleksibel.

Solusinya

Ada solusi lintas-browser yang sederhana dan mudah untuk masalah ini:

Bungkus isi buttondalam a span, dan buat spanwadah fleksibel.

HTML yang disesuaikan (dibungkus buttonkonten dalam a span)

<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>

CSS yang disesuaikan (bertarget span)

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

Demo Revisi

Referensi / Laporan Bug

Flexbox pada suatu <button>memblokir konten tetapi tidak membuat konteks pemformatan fleksibel

Pengguna (Oriol Brufau): Anak-anak dari <button>diblokir, seperti yang ditentukan oleh spesifikasi flexbox. Namun, <button>tampaknya membuat konteks pemformatan blok daripada yang fleksibel.

Pengguna (Daniel Holbert): Itulah yang dibutuhkan spesifikasi HTML. Beberapa elemen penampung HTML bersifat "khusus" dan secara efektif mengabaikan displaynilai CSS-nya di Gecko [selain dari apakah itu tingkat sebaris vs. tingkat blok]. <button>adalah salah satunya. <fieldset>& <legend>juga.

Tambahkan dukungan untuk tampilan: flex / grid dan tata letak kolom di dalam <button>elemen

Pengguna (Daniel Holbert):

<button>tidak dapat diimplementasikan (oleh browser) dalam CSS murni, jadi itu adalah kotak hitam, dari perspektif CSS. Ini berarti bahwa mereka tidak selalu bereaksi dengan cara yang sama seperti misalnya keinginan <div> .

Ini tidak spesifik untuk flexbox - misalnya kami tidak membuat scrollbar jika Anda meletakkan overflow:scrolltombol, dan kami tidak membuatnya sebagai tabel jika Anda meletakkannya display:table.

Melangkah mundur lebih jauh, ini tidak spesifik <button>. Pertimbangkan <fieldset>dan <table>yang juga memiliki perilaku rendering khusus.

Dan elemen HTML lama seperti <button>dan <table>dan <fieldset>tidak mendukung displaynilai khusus , selain untuk menjawab pertanyaan tingkat tinggi "apakah elemen ini tingkat blok atau tingkat sebaris", untuk mengalirkan konten lain di sekitar elemen .

Lihat juga:

Question 3

Ini hack saya yang paling sederhana.

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

Question 4

Memulai Chrome 83, buttonsekarang berfungsi sebagai inline-grid/grid/inline-flex/flex, Anda dapat melihat lebih banyak tentang fitur baru ini di sini

Berikut ini cuplikan (untuk mereka yang menggunakan Chrome 83 dan lebih tinggi)

button {
  display: inline-flex;
  height: 2rem;
  align-items: flex-end;
  width: 4rem;
  -webkit-appearance: none;
  justify-content: flex-end;
}

<!-- 

The align-items keyword should fail in Chrome 81 or earlier, but work in Chrome 83 or later. To see the error, the button needs styles that make it more of an extrinsic container. In other words, it needs a height or width set. 
 
-->
<button>Hi</button>
<input type="button" value="Hi">

Luaskan cuplikan