hujung hadapan web
tutorial css
Petua Pantas: Bagaimana Z-Indeks dan Margin Auto Berfungsi di Flexbox
Petua Pantas: Bagaimana Z-Indeks dan Margin Auto Berfungsi di Flexbox
Feb 21, 2025 am 09:11 AM
mata utama
- Flexbox membolehkan atribut
- digunakan untuk unsur -unsur yang tidak tercook (seperti projek flex) walaupun atribut
positionprojek Flex ditetapkan kepadastatic. Ini boleh digunakan untuk mengawal susunan elemen.z-index Margin automatik dalam Flexbox boleh digunakan untuk melaksanakan penjajaran tersuai item flex di sepanjang gelendong. Mereka menyerap ruang tambahan dan menolak projek bersebelahan, membolehkan corak UI yang unik. - Walaupun kelihatan sama secara visual, menggunakan margin automatik dan sifat
- boleh menghasilkan hasil susun atur yang berbeza, terutama dari segi lebar atau ketinggian yang dikira elemen. Adalah penting untuk memilih kaedah yang paling sesuai dengan susun atur yang dikehendaki.
flex-grow
Anda mungkin sudah tahu bahawa atribut
hanya sesuai untuk unsur -unsur kedudukan. Secara lalai, atribut z-index semua elemen adalah position dan tidak diposisikan. Apabila atribut static unsur ditetapkan ke position, relative, absolute, atau fixed, elemen adalah elemen "kedudukan". sticky
z-index
adalah, nilai
untuk memahami tingkah laku ini, pertimbangkan contoh berikut:position(bukanstatic) juga mewujudkan konteks penyusunan.z-indexauto
pautan demo codepen
di sini, kita menentukan dua elemen:
elemen dan elemen. .front Unsur ini mempunyai elemen kanak -kanak, kotak dengan nombor "1". .back elemen itu sendiri benar -benar diposisikan. Khususnya, atributnya .front adalah .front dan meliputi keseluruhan viewport. position
fixed elemen
dari projek Flexnya, walaupun mereka tidak meletakkan unsur -unsur (iaitu atribut .back mereka adalah z-index). position
static Perhatikan bahawa apabila kita menambah
. z-index: 2
flexbox dan margin automatik
kita dapat menyelesaikan corak UI biasa dengan menggunakan margin automatik untuk projek flex. Pertama, mari kita anggap kita mahu membina susun atur tajuk biasa ini:
ini tanda kami:
<header>
<nav>
<h1 class="logo">LOGO</h1>
<ul class="menu">
<li><a href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a></li>
<li><a href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Projects</a></li>
<li><a href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact</a></li>
</ul>
<ul class="social">
<li><a href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Facebook</a></li>
<li><a href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Twitter</a></li>
</ul>
</nav>
</header> CSS kami adalah seperti berikut:
header {
background: http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b333;
}
nav {
display: flex;
align-items: center;
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
.menu {
margin-left: 60px;
margin-right: auto;
} Dalam contoh ini, elemen kami adalah bekas Flex, dan logo, menu utama dan menu sosial adalah item Flex. Seperti yang dapat dilihat dari visualisasi sebelumnya, dua item flex pertama diselaraskan di sepanjang paksi utama ke sebelah kiri bekas Flex. Sebaliknya, menu sosial menjajarkan sepanjang paksi utama dengan tepi kanan elemen induknya. nav
ke menu utama. Dengan hanya satu baris kod, kita boleh mengatasi penjajaran lalai menu sosial dan menolaknya sepenuhnya ke kanan bekasnya. Begitu juga, kami menggunakan harta margin-right: auto untuk mengatasi penjajaran lalai item Flex di sepanjang paksi salib. align-self
kepadanya. margin-right
flex-grow: 1 Walaupun hasilnya kelihatan sama dalam kedua -dua kes, terdapat perbezaan yang besar. Dengan penyelesaian pertama, menu kami mempunyai lebar yang dikira awalnya. Sebagai contoh, apabila lebar viewport adalah 1100px, lebar menu akan kelihatan seperti ini:
. Apabila lebar viewport adalah 1100px, lebarnya yang sama adalah seperti berikut: 
flex-grow: 1
Dalam contoh ini, perhatikan bahawa menu sosial sejajar dengan tepi bawah elemen induknya. Sekali lagi, ini dilakukan dengan menambahkan 
ke menu utama. Sudah tentu, kita juga boleh menggunakan
nav {
background: http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b333;
display: flex;
flex-direction: column;
height: 100vh;
width: 180px;
padding: 20px;
box-sizing: border-box;
}
.menu {
margin-top: 60px;
margin-bottom: auto;
} pautan demo codepen margin-bottom: autoSatu lagi perkara yang perlu diperhatikan ialah jika kita menentukan harta
dalam apa jua contoh, kita tidak akan melihat sebarang perbezaan visual. Ini berlaku kerana kami menggunakan margin automatik untuk menyelaraskan item flex. Atribut justify-content hanya akan berkuatkuasa apabila kita memadam margin automatik. Menurut spesifikasi: justify-content
Jika ruang kosong ditugaskan untuk margin automatik, harta penjajaran tidak akan berfungsi dalam dimensi itu, kerana margin akan mengambil ruang di semua ruang bebas yang tersisa selepas flex.Seterusnya, mari buat varian baru tajuk:
Ini dapat dicapai dengan mudah dengan menetapkan
ke menu utama. justify-content: space-between
margin: 0 auto
Dalam artikel ini, kami memperkenalkan dua petua Flexbox yang kurang dikenali. Sebelum kita selesai, mari kita tinjau:
Walaupun sifat
- projek flex adalah
- , kita boleh memohon atribut
positionke projek Flex.staticz-indexkita boleh menggunakan margin automatik untuk mencapai penjajaran tersuai item flex di sepanjang gelendong. - Jika anda menggunakan mana -mana petua ini dalam projek anda, beritahu kami dalam komen di bawah.
FAQ untuk z-indeks dan margin automatik dalam flexbox
Apakah z-indeks dalam flexbox? Bagaimana ia berfungsi?
adalah atribut CSS yang mengawal urutan penumpukan menegak elemen bertindih. Dalam Flexbox, harta
hanya sesuai untuk elemen kedudukan. Nilai lalai ialah Z-Index, yang bermaksud susunan susunan adalah sama dengan elemen induknya. Jika nombor positif diberikan kepada Z-Index, elemen akan berada di atas elemen induk. Z-Index
auto Mengapa indeks Z saya tidak berfungsi di Flexbox? Z-Index
anda tidak berfungsi di Flexbox kerana beberapa sebab. Sebab yang sama ialah atribut
hanya sesuai untuk unsur -unsur kedudukan. Jika elemen anda tidak diposisikan (iaitu, nilai tidak Z-Index, Z-Index atau position), maka relative tidak akan memberi kesan. Sebab lain ialah elemen induk mempunyai set nilai absolute, yang mempengaruhi urutan penyusunan elemen kanak -kanak. fixed
Bagaimana margin automatik berfungsi di flexbox?
Di Flexbox, margin automatik mempunyai ciri khas. Mereka boleh menyerap ruang tambahan dan menolak projek bersebelahan. Apabila anda menetapkan margin automatik pada projek Flex, ia mengambil apa -apa ruang yang tinggal di sepanjang gelendong, dengan berkesan menolak projek lain. Ini sangat berguna untuk menyelaraskan item dalam bekas flex.
Bolehkah saya menggunakan z-indeks untuk mengawal susunan item flex?
Ya, anda boleh menggunakan harta Z-Index untuk mengawal susunan item flex di sepanjang paksi z. Walau bagaimanapun, ingat bahawa Z-Index hanya sesuai untuk elemen kedudukan. Jika projek Flex anda tidak diposisikan, Z-Index tidak akan memberi kesan.
Mengapa projek Flex saya tidak diselaraskan dengan margin automatik?
Jika projek Flex anda tidak diselaraskan dengan margin automatik, ia mungkin disebabkan oleh beberapa sebab. Sebab yang sama adalah bahawa bekas Flex mempunyai ketinggian atau lebar tetap, yang membatasi ruang yang tersedia untuk margin. Sebab lain ialah projek Flex mempunyai saiz tetap, yang menghalang margin daripada menyerap ruang tambahan.
Bagaimana menyelesaikan masalah z-indeks di flexbox?
Selesaikan masalah Z-Index di Flexbox biasanya melibatkan memastikan elemen anda diposisikan dan nilai Z-Index ditetapkan dengan betul. Jika Z-Index anda tidak berfungsi, periksa sama ada elemen anda diletakkan. Jika tidak, anda boleh mengesannya dengan menetapkan nilai relative, absolute atau fixed. Juga, periksa nilai position unsur induk, kerana ia mempengaruhi urutan penyusunan elemen kanak -kanak. Z-Index
Ya, anda boleh menggunakan margin automatik untuk memusatkan item flex dalam bekas Flex. Dengan menetapkan margin automatik di semua sisi projek Flex, ia akan berpusat secara menegak dan mendatar dalam bekas Flex.
Apakah nilai lalai z-indeks dalam flexbox?
Nilai lalai
dalam Z-Index dalam flexbox adalah auto. Ini bermakna bahawa susunan susunan item Flex adalah sama dengan elemen induknya. Jika anda ingin menukar susunan susunan, anda boleh menetapkan nombor positif atau negatif kepada Z-Index.
Bagaimanakah z-indeks mempengaruhi susunan elemen stacking?
Z-Index Mempengaruhi susunan elemen penyusunan dengan menentukan unsur -unsur yang muncul di atas unsur -unsur lain. Unsur -unsur dengan nilai yang lebih tinggi Z-Index akan muncul di atas unsur -unsur dengan nilai Z-Index yang lebih rendah. Jika dua elemen mempunyai Z-Index yang sama, unsur -unsur yang muncul selepas HTML akan muncul di bahagian atas.
Bolehkah saya menggunakan z-indeks dengan flexbox untuk membuat elemen bertindih?
Ya, anda boleh menggunakan atribut Z-Index dengan Flexbox untuk membuat elemen bertindih. Dengan memberikan nilai Z-Index yang berbeza ke projek Flex anda, anda boleh mengawal item yang muncul di atas projek lain, mewujudkan kesan bertindih. Ingat bahawa Z-Index hanya sesuai untuk unsur -unsur kedudukan, jadi anda perlu meletakkan projek Flex anda untuk Z-Index untuk berkuatkuasa.
Sila ambil perhatian bahawa saya telah menyimpan semua pautan imej dalam format asal dan mempunyai pseudo-asal teks, berusaha untuk membuat artikel ekspresif lebih pelbagai tanpa mengubah makna asal. Oleh kerana pautan codepen tidak dapat diakses, saya menggantikan pautan dalam teks asal dengan " pautan demo codepen ". Sila ganti dengan pautan sebenar sendiri.
Atas ialah kandungan terperinci Petua Pantas: Bagaimana Z-Indeks dan Margin Auto Berfungsi di Flexbox. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Apa itu 'menyekat CSS'?
Jun 24, 2025 am 12:42 AM
CSS Blok halaman yang diberikan kerana pelayar melihat CSS dalam talian dan luaran sebagai sumber utama secara lalai, terutamanya dengan stylesheet yang diimport, header sejumlah besar CSS sebaris, dan gaya pertanyaan media yang tidak dapat dioptimumkan. 1. Ekstrak CSS kritikal dan membenamkannya ke HTML; 2. Kelewatan memuatkan CSS bukan kritikal melalui JavaScript; 3. Gunakan atribut media untuk mengoptimumkan pemuatan seperti gaya cetak; 4. Memampatkan dan menggabungkan CSS untuk mengurangkan permintaan. Adalah disyorkan untuk menggunakan alat untuk mengekstrak CSS utama, menggabungkan REL = "Preload" pemuatan asynchronous, dan menggunakan media yang ditangguhkan dengan munasabah untuk mengelakkan pemisahan yang berlebihan dan kawalan skrip kompleks.
Luaran vs CSS Dalaman: Apakah pendekatan terbaik?
Jun 20, 2025 am 12:45 AM
Thebestapproachforcssdependonstantheproject'ssspecificneeds.forlargerprojects, externalcssisbetterduetomaintainabilityability;
Adakah CSS saya mesti berada di bawah kes?
Jun 19, 2025 am 12:29 AM
Tidak, cssdoesnothavetobeinlowercase.however, menggunakanLowerCaseisRecommendorfendfor: 1) Consistencyandreadability, 2) Mengelakkaningerrorsinrelatedtechnologies, 3) potensiformanceBenefits, dan4) peningkatan yang lebih baik.
Kepekaan kes CSS: Memahami apa yang penting
Jun 20, 2025 am 12:09 AM
Cssismostlycase-insensitive, buturlsandfontfamilynamesarecase-sensitif.1) propertiesandvalueslikecolor: merah; arenotcase-sensitif.2) urlsmustmatchtheserver'scase, mis.,
Apakah AutoPrefixer dan bagaimana ia berfungsi?
Jul 02, 2025 am 01:15 AM
AutoPrefixer adalah alat yang secara automatik menambah awalan vendor ke atribut CSS berdasarkan skop penyemak imbas sasaran. 1. Ia menyelesaikan masalah mengekalkan awalan secara manual dengan kesilapan; 2. Bekerja melalui borang pemalam postcss, menghuraikan CSS, menganalisis atribut yang perlu diawali, dan menjana kod mengikut konfigurasi; 3. Langkah-langkah penggunaan termasuk memasang pemalam, menetapkan senarai pelayar, dan membolehkan mereka dalam proses membina; 4. Nota termasuk tidak menambah awalan secara manual, menyimpan kemas kini konfigurasi, awalan tidak semua atribut, dan disyorkan untuk menggunakannya dengan preprocessor.
Apakah kaunter CSS?
Jun 19, 2025 am 12:34 AM
Csscounterscanautomaticallynumbersectionsandlists.1) useCounter-resettoinitialize, counter-incrementToinCrease, andCounter () orcounters () todisplayvalues.2) CombinWithjavascriptfordynamicContentToenSureAccurateupdates.
CSS: Bilakah kes perkara (dan kapan tidak)?
Jun 19, 2025 am 12:27 AM
Dalam CSS, nama pemilih dan atribut adalah sensitif kes, manakala nilai, warna yang dinamakan, URL, dan atribut tersuai adalah sensitif kes. 1. Nama pemilih dan atribut adalah kes-tidak sensitif, seperti warna latar belakang dan warna latar belakang adalah sama. 2. Warna heksadesimal dalam nilai adalah sensitif kes, tetapi warna bernama adalah sensitif kes, seperti merah dan merah tidak sah. 3. URL adalah sensitif kes dan boleh menyebabkan masalah pemuatan fail. 4. Sifat tersuai (pembolehubah) adalah sensitif kes, dan anda perlu memberi perhatian kepada konsistensi kes apabila menggunakannya.
Apakah fungsi conic-gradient ()?
Jul 01, 2025 am 01:16 AM
Function-gradient () functionIncsscreatesculculargradientsthatrotatecolorstopsaroundroentroint.1.ISIISIDEALFORPIECHARTS, Progressindicators, Colorwheels, andDecorativeBackgrounds.2.itworksByDefiningColorStopsatSpecificles, OpsticalStarting
