Jajarkan elemen kiri dan tengah menggunakan Flexbox-Soal Jawab Rangkaian PHP Cina

Artikel Topik pembelajaran Muat turun Soal Jawab Kamus Pengaturcaraan Permainan kemas kini terkini

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Jajarkan elemen kiri dan tengah menggunakan Flexbox

P粉545682500 2023-08-27 21:54:23

507

Saya menggunakan Flexbox untuk menyelaraskan elemen anak saya. Apa yang saya mahu lakukan ialah memusatkan satu elemen dan menyelaraskan elemen lain ke kiri. Biasanya saya akan menggunakan margin-right: auto Masalahnya ialah menolak elemen tengah dari pusat. Adakah ini boleh dilakukan tanpa menggunakan kedudukan mutlak?

HTML dan CSS

#parent { align-item: tengah; sempadan: 1px hitam pejal; paparan: flex; justify-content: pusat; margin: 0 auto; lebar: 500px; } #dibiarkan { margin-kanan: auto; } #center { margin: auto; }

 Left Center

P粉545682500

membalas semua (2)

P粉5613239752023-08-28 20:51:28 Tingkat 2

Tambah elemen kosong ketiga:

 Left
 Center

dan gaya berikut:

.parent { display: flex; } .left, .right { flex: 1; }

Hanya kiri dan kanan sahaja yang akan membesar, dan disebabkan hakikatnya...

Hanya terdapat dua elemen yang semakin meningkat (tidak kira jika ia kosong) dan
Kedua-duanya mempunyai lebar yang sama (mereka akan mengagihkan ruang yang ada secara merata)

...Elemen tengah akan sentiasa berpusat dengan sempurna.

Pada pendapat saya ini adalah lebih baik daripada jawapan yang diterima kerana anda tidak perlu menyalin kandungan kiri ke kanan dan menyembunyikannya untuk mendapatkan lebar yang sama pada kedua-dua belah pihak,ia berlaku secara ajaib(flexbox is magic).

Pembedahan praktikal:

.parent { display: flex; } .left, .right { flex: 1; } /* Styles for demonstration */ .parent { padding: 5px; border: 2px solid #000; } .left, .right { padding: 3px; border: 2px solid red; } .center { margin: 0 3px; padding: 3px; border: 2px solid blue; }

 Left
 Center

Suka+0

Tambah Balasan

P粉8999507202023-08-28 20:09:58 Tingkat 1

EDIT:LihatJawapan Solodi bawah, yang merupakan penyelesaian yang lebih baik.

Idea di sebalik flexbox adalah untuk menyediakan rangka kerja untuk menjajarkan elemen dengan mudah dengan dimensi berubah dalam bekas. Oleh itu, tidak masuk akal untuk menyediakan susun atur yang benar-benar mengabaikan lebar elemen. Pada asasnya, ini adalah tujuan kedudukan mutlak, kerana ia mengeluarkan elemen daripada aliran biasa.

Setahu saya tidak ada cara yang baik untuk melakukan ini tanpa menggunakanposition:absolute;jadi saya cadangkan untuk menggunakannya... tetapi jika anda benar-benar tidak mahu melakukannya atau tidak boleh menggunakan kedudukan mutlak maka saya fikir anda boleh menggunakan salah satu penyelesaian berikut.

Jika anda tahu lebar tepatdiv "kiri", maka anda boleh meletakkanjustify-content更改为flex-start(kiri) dan kemudian selaraskan div "tengah" seperti ini:

#center { position: relative; margin: auto; left: -{half width of left div}px; }

Jika anda tidak tahu lebarnyamaka anda boleh salin "Kiri" di sebelah kanan, gunakanjustify-content: space- Between;dan kemudian sembunyikan elemen kanan baharu:Untuk menjadi jelas, ini benar-benar hodoh...lebih baik menggunakan kedudukan mutlak daripada menyalin kandungan. :-)

#parent { align-items: center; border: 1px solid black; display: flex; justify-content: space-between; margin: 0 auto; width: 500px; } #right { opacity: 0; }