Petua Pantas: Bagaimana Z-Indeks dan Margin Auto Berfungsi di Flexbox

Flexbox digunakan secara meluas untuk menyelesaikan masalah susun atur yang sama seperti kaki melekit dan lajur kontur. Sebagai tambahan kepada ciri -ciri ini, ia menawarkan beberapa ciri praktikal lain yang kurang popular. Mari kita meneroka dua daripada mereka!

mata utama

Flexbox membolehkan atribut
• digunakan untuk unsur -unsur yang tidak tercook (seperti projek flex) walaupun atribut position projek Flex ditetapkan kepada static. 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

flexbox dan z-indeks

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 Walau bagaimanapun, unsur -unsur yang tidak tercook (seperti item flex) juga boleh menerima atribut

. Spesifikasi susun atur kotak elastik CSS menunjukkan:

z-index

projek flex ditarik dengan cara yang sama seperti blok sebaris [CSS21], kecuali bahawa urutan dokumen diubah suai mengikut urutan dan bukannya urutan dokumen asal, dan walaupun

adalah

, nilai position (bukan static) juga mewujudkan konteks penyusunan. z-index auto

untuk memahami tingkah laku ini, pertimbangkan contoh berikut:

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

kami adalah bekas flex. Ia mengandungi dua elemen kanak -kanak - kotak dengan nombor "2" dan "3". Berdasarkan apa yang kita bincangkan di atas, kita boleh menetapkan atribut

dari projek Flexnya, walaupun mereka tidak meletakkan unsur -unsur (iaitu atribut .back mereka adalah z-index). position static Perhatikan bahawa apabila kita menambah

ke projek Flex dengan mengklik butang dalam demo di atas, mereka berada di atas elemen

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

Untuk membinanya, kami akan menggunakan Flexbox. Tidak perlu terapung, lebar tetap atau apa -apa seperti itu.

ini tanda kami:

<header>
  <nav>
    <h1 class="logo">LOGO</h1>
    <ul class="menu">
      <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a></li>
      <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Projects</a></li>
      <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact</a></li>
    </ul>
    <ul class="social">
      <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Facebook</a></li>
      <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Twitter</a></li>
    </ul>
  </nav>
</header>

CSS kami adalah seperti berikut:

header {
  background: https://www.php.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

Satu cara untuk mencapai penjajaran tersuai ini adalah untuk menambah

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

Selain margin automatik, kami juga boleh menggunakan kaedah kedua untuk membina susun atur yang diperlukan. Pertama, kami mengeluarkan harta dari menu utama dan tambahkan

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:

Sebaliknya, dengan penyelesaian kedua, lebar menu akan menjadi lebih besar kerana kami menetapkan

. Apabila lebar viewport adalah 1100px, lebarnya yang sama adalah seperti berikut:

flex-grow: 1

pautan demo codepen

mari kita anggap kita mahu mengubah suai susun atur tajuk. Berikut adalah susun atur yang diperlukan:

Tanda

tetap sama. Kami hanya perlu membuat beberapa perubahan dalam CSS:

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

, tetapi ini akan meningkatkan ketinggian menu.

nav {
  background: https://www.php.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 bekas flex, tanpa keraguan. Walau bagaimanapun, sekali lagi, kami dapat menggunakan margin automatik untuk menghasilkan susun atur yang sama. Apa yang perlu kita lakukan ialah memohon

ke menu utama. justify-content: space-between margin: 0 auto

pautan demo codepen

Kesimpulan

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 position ke projek Flex. static z-index kita 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 boleh digunakan untuk mengawal urutan di mana item Flex berada di sepanjang paksi z. Adalah penting untuk diperhatikan bahawa

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

Bolehkah saya menggunakan margin automatik untuk memusatkan item flex?

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!