cari
Rumahhujung hadapan webhtml tutorialTutorial HTML: Cara menggunakan Flexbox untuk pengedaran sama rata

Tutorial HTML: Cara menggunakan Flexbox untuk pengedaran sama rata

Tutorial HTML: Cara menggunakan Flexbox untuk pengedaran sama

Dalam pembangunan web, melaksanakan pengedaran sama rata adalah keperluan yang sangat biasa. Pendekatan tradisional mungkin memerlukan banyak kod CSS dan sukar untuk dikekalkan. Menggunakan susun atur Flexbox, kami boleh mencapai pengedaran yang sama melalui beberapa atribut dan nilai mudah, yang sangat memudahkan proses penulisan dan penyelenggaraan kod.

Artikel ini akan memperkenalkan konsep asas dan penggunaan Flexbox, dan memberikan contoh kod khusus.

1. Pengenalan kepada Flexbox Layout

Flexbox ialah modul susun atur CSS yang boleh mengatur dan susun atur elemen mengikut peraturan tertentu. Flexbox mengguna pakai model kotak fleksibel, yang membolehkan elemen dikembangkan secara bebas, diselaraskan dan diedarkan dalam bekas. Kelebihan Flexbox terletak pada sintaksnya yang ringkas dan mudah difahami serta keupayaan susun atur yang berkuasa.

2. Konsep asas susun atur Flexbox

Sebelum menggunakan susun atur Flexbox, kita perlu memahami beberapa konsep asas.

1. Bekas: Elemen dengan susun atur Flexbox dipanggil bekas. Semua elemen di dalam bekas akan dipengaruhi oleh susun atur Flexbox.

2 Item: Elemen di dalam bekas dipanggil item. Item adalah unit asas susun atur Flexbox, ia diletakkan pada paksi utama bekas.

3. Paksi Utama: Arah di mana item disusun dalam bekas dipanggil paksi utama. Secara lalai, paksi utama adalah mendatar.

4 Paksi Silang: Arah berserenjang dengan paksi utama dipanggil paksi silang. Secara lalai, paksi silang adalah menegak.

3. Sifat dan nilai susun atur Flexbox

Susun atur Flexbox menyediakan satu siri sifat dan nilai untuk mengawal susun atur bekas dan item.

1. Sifat bekas

  • paparan: Tetapkan mod paparan bekas kepada lentur atau sebaris.
  • arah-flex: Tetapkan arah paksi utama (baris, baris-terbalik, lajur, lajur-terbalik).
  • flex-wrap: Tetapkan sama ada item membalut (nowrap, wrap, wrap-reverse).
  • justify-content: Tetapkan penjajaran item pada paksi utama (flex-start, flex-end, tengah, ruang-antara, ruang-keliling).
  • align-item: Tetapkan penjajaran item pada paksi silang (fleks-mula, lentur-hujung, tengah, garis dasar, regangan).
  • selaras-kandungan: Tetapkan penjajaran item berbilang baris pada paksi silang (fleks-mula, lentur-hujung, tengah, ruang-antara, ruang-keliling, regangan).

2. Properti projek

  • pesanan: Tetapkan susunan item.
  • flex-grow: Tetapkan nisbah pembesaran projek lalai ialah 0, yang bermaksud tiada pembesaran.
  • flex-shrink: Tetapkan nisbah pengecutan projek. Lalai ialah 1, yang boleh dikurangkan.
  • flex-basis: Tetapkan saiz awal item pada paksi utama.
  • flex: Tetapkan sifat singkatan projek, termasuk flex-grow, flex-shrink dan flex-basis.
  • align-self: Tetapkan penjajaran satu item pada paksi silang.

4. Contoh kod penggunaan Flexbox untuk pengedaran sama

Berikut ialah contoh kod khusus menggunakan Flexbox untuk pengedaran sama, yang melaksanakan reka letak bar navigasi yang mudah.

Kod HTML:

<div class="navbar">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</div>

Kod CSS:

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  background-color: lightblue;
}

.navbar a {
  flex: 1;
  text-align: center;
  padding: 10px;
}

.navbar a:hover {
  background-color: lightgray;
}

Dalam contoh di atas, dengan menetapkan sifat .navbardisplay属性为flex,使其成为一个容器。.navbar的子元素<a></a>就是项目,通过设置flex: 1的属性,实现了等分布局。同时,通过justify-content: space-betweenalign-items: center, penjajaran dan pengedaran item pada paksi utama dan paksi silang dicapai.

Melalui contoh ini, kita dapat melihat bahawa susun atur pengedaran sama rata menggunakan Flexbox adalah sangat mudah dan boleh dilengkapkan dengan hanya beberapa baris kod CSS. Pada masa yang sama, disebabkan keupayaan susun atur berkuasa Flexbox, kesan susun atur yang lebih kompleks boleh dicapai dengan mudah.

Ringkasan

Artikel ini memperkenalkan konsep asas dan penggunaan susun atur Flexbox, dan memberikan contoh kod khusus bagi reka letak pengedaran sama rata. Saya berharap melalui artikel ini, pembaca dapat lebih memahami dan menguasai susun atur Flexbox dan menggunakannya secara fleksibel dalam projek sebenar.

Atas ialah kandungan terperinci Tutorial HTML: Cara menggunakan Flexbox untuk pengedaran sama rata. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?Mar 04, 2025 pm 12:32 PM

Cache kemas kini laman web akaun rasmi, perkara ini mudah dan mudah, dan ia cukup rumit untuk minum periuknya. Anda bekerja keras untuk mengemas kini artikel akaun rasmi, tetapi pengguna masih membuka versi lama. Dalam artikel ini, mari kita lihat kelainan dan bertukar di belakang ini dan bagaimana menyelesaikan masalah ini dengan anggun. Selepas membacanya, anda boleh dengan mudah menangani pelbagai masalah caching, yang membolehkan pengguna anda sentiasa mengalami kandungan segar. Mari kita bincangkan asas -asas terlebih dahulu. Untuk meletakkannya secara terang -terangan, untuk meningkatkan kelajuan akses, penyemak imbas atau pelayan menyimpan beberapa sumber statik (seperti gambar, CSS, JS) atau kandungan halaman. Kali seterusnya anda mengaksesnya, anda boleh mengambilnya secara langsung dari cache tanpa perlu memuat turunnya lagi, dan ia secara semula jadi cepat. Tetapi perkara ini juga pedang bermata dua. Versi baru dalam talian,

Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?Mar 17, 2025 pm 12:27 PM

Artikel ini membincangkan menggunakan atribut pengesahan bentuk HTML5 seperti had, corak, min, max, dan panjang untuk mengesahkan input pengguna secara langsung dalam penyemak imbas.

Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?Mar 17, 2025 pm 12:20 PM

Artikel membincangkan amalan terbaik untuk memastikan keserasian silang pelayar HTML5, memberi tumpuan kepada pengesanan ciri, peningkatan progresif, dan kaedah ujian.

Bagaimana cara menambah kesan strok kepada imej PNG di laman web?Bagaimana cara menambah kesan strok kepada imej PNG di laman web?Mar 04, 2025 pm 02:39 PM

Artikel ini menunjukkan penambahan sempadan PNG yang cekap ke halaman web menggunakan CSS. Ia berpendapat bahawa CSS menawarkan prestasi unggul berbanding dengan JavaScript atau perpustakaan, memperincikan cara menyesuaikan lebar sempadan, gaya, dan warna untuk kesan halus atau menonjol

Apakah tujuan & lt; DATALIST & GT; unsur?Apakah tujuan & lt; DATALIST & GT; unsur?Mar 21, 2025 pm 12:33 PM

Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

Apakah tujuan & lt; kemajuan & gt; unsur?Apakah tujuan & lt; kemajuan & gt; unsur?Mar 21, 2025 pm 12:34 PM

Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik?Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik?Mar 12, 2025 pm 04:05 PM

Artikel ini menerangkan html5 & lt; time & gt; elemen untuk perwakilan tarikh/masa semantik. Ia menekankan pentingnya atribut DateTime untuk pembacaan mesin (format ISO 8601) bersama teks yang boleh dibaca manusia, meningkatkan aksesibilit

Apakah tujuan & lt; meter & gt; unsur?Apakah tujuan & lt; meter & gt; unsur?Mar 21, 2025 pm 12:35 PM

Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

PhpStorm versi Mac

PhpStorm versi Mac

Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).

Dreamweaver Mac版

Dreamweaver Mac版

Alat pembangunan web visual

SecLists

SecLists

SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

MinGW - GNU Minimalis untuk Windows

MinGW - GNU Minimalis untuk Windows

Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.