Pusatkan item lentur dalam bekas apabila dikelilingi oleh item lentur lain-Soal Jawab Rangkaian PHP Cina

Saya mempunyai flexbox (lihat coretan kod di bawah sebagai contoh).

Saya mahu menyediakannya supaya dalam semua kes,

berada di tengah-tengah flex-box akan mengalir di sekelilingnya, Berdasarkan penanda mereka.

Saya pada asasnya mencari align-self kod CSS, tetapi untuk paksi utama, bukan paksi mendatar (yang mungkin membantu menjelaskan perkara yang saya minta).

Saya juga menggunakan margin: auto; pada

yang saya pelajari selepas membaca artikel ini (halaman yang bagus, tetapi masih meninggalkan saya dengan soalan berikut - kecuali saya tidak memahami sepenuhnya segala-galanya).

Ini ialah kod yang saya dapat:

.bekas { align-item: tengah; sempadan: 1px merah pepejal; paparan: flex; justify-content: pusat; lebar: 100%; } h2 { margin: auto; ]

Saya seorang h2 Saya span 1 Saya span 2 Saya span 3 Saya span 1 Saya span 2 Saya span 3 Saya seorang h2 Saya span 4 Saya span 5 Saya span 6 Saya span 1 Saya span 2 Saya seorang h2 Saya span 3

Untuk menyatakan semula soalan saya sepenuhnya: Saya ingin tahu cara memusatkan
pada halaman saya supaya tidak kira apa,
akan sentiasa berada di tengah mati

P.S.: Saya bersedia menggunakan JavaScript dan jQuery, tetapi saya lebih suka cara CSS tulen untuk melakukan ini.

Selepas Michael Benjamin membalas:

Jawapannya membuatkan saya berfikir. Walaupun saya masih belum menemui cara untuk melakukan ini, saya percaya yang berikut adalah langkah ke arah yang betul:

HTML

  Saya span 1 Saya span 2 Saya span 3 
 Saya seorang h2
  Saya span 4 Saya span 5 Saya span 6

CSS

.container div { lentur: 1 1 auto; text-align: tengah; } h2 { lentur: 0 0 auto; margin: auto; }

.bekas { align-item: tengah; sempadan: 1px merah pepejal; paparan: flex; justify-content: pusat; lebar: 100%; } .container div { lentur: 1 1 auto; text-align: tengah; } h2 { lentur: 0 0 auto; margin: auto; }

Saya seorang h2 Saya span 1 Saya span 2 Saya span 3 Saya span 1 Saya span 2 Saya span 3 Saya seorang h2 Saya span 4 Saya span 5 Saya span 6 Saya span 1 Saya span 2 Saya seorang h2 Saya span 3

Pada asasnya, teorinya ialah walaupun jumlah bilangan diketahui terdapat tiga elemen secara keseluruhan:

< ;h2> < div>

Seperti yang anda lihat dalam coretan kod di atas, saya telah mencuba (flex: 0 0 auto dan flex: 1 1 auto dsb.) untuk membenarkan Ia berfungsi tetapi masih belum berfungsi. Bolehkah sesiapa memberitahu saya jika ini adalah langkah ke arah yang betul dan bagaimana untuk menolak ini ke dalam produk sebenar?

P粉042455250

membalas semua (2)

P粉7262346482023-08-26 12:03:04 Tingkat 2

Salah satu cara ialah menambah rentang kosong pada kedua-dua belah dan kemudian tetapkan rentang dan h2 kepada beberapa nilai flex seperti ini:

.container { align-items: center; border: 1px solid red; display: flex; justify-content: center; width: 100%; } h2 { margin: auto; text-align: center; flex: 3 0; } span{ flex: 1 0; }

    I'm an h2
 I'm span 1 I'm span 2 I'm span 3 
  I'm span 1 I'm span 2 I'm span 3 I'm an h2
 I'm span 4 I'm span 5 I'm span 6 
  I'm span 1 I'm span 2  I'm an h2
 I'm span 3

Jadi anda pastikan ruang di kedua-dua belah adalah sama. Satu-satunya masalah ialah anda perlu memutuskan sejauh mana anda mahu h2 ambil.

Suka+0

Tambah Balasan

P粉4289867442023-08-26 00:15:33 Tingkat 1

Sifat penjajaran fleksibel berfungsi dengan memperuntukkan ruang yang ada di dalam bekas.

Jadi apabila item Flex berkongsi ruang dengan item lain, tiada cara satu langkah untuk memusatkannyamelainkan jumlah panjang item adik-beradik di kedua-dua belah adalah sama.

Dalam contoh kedua,h2两侧的跨度总长度相等。因此，h2sepenuhnya berada di tengah-tengah bekas.

.container { display: flex; justify-content: center; align-items: center; border: 1px solid red; margin: 5px; padding: 5px; } p { text-align: center;} p > span { background-color: aqua; padding: 5px; }

I'm span 1 I'm span 2 I'm span 3