flexbox CSS: Alat susun atur satu dimensi

Flexbox, modul susun atur kotak elastik, adalah alat yang berkuasa dalam CSS untuk membuat susun atur satu dimensi seperti satu siri projek yang serupa. Ia amat sesuai untuk susun atur lajur tunggal atau tunggal dan boleh digunakan sebagai alternatif yang boleh dipercayai untuk susun atur grid pada pelayar yang lebih tua. Artikel ini akan memberi anda panduan Flexbox yang mudah difahami.

Walaupun terdapat susun atur grid CSS, Flexbox masih mempunyai nilai yang unik. Walaupun terdapat beberapa pertindihan fungsi antara kedua -duanya, mereka memainkan peranan yang berbeza dalam susun atur CSS. Secara umumnya, Flexbox lebih sesuai untuk susun atur satu dimensi (mis., Satu siri projek yang sama), manakala grid lebih sesuai untuk susun atur dua dimensi (mis. Unsur seluruh halaman).

Walau bagaimanapun, Flexbox

juga boleh digunakan untuk susun atur halaman penuh, jadi dalam pelayar yang tidak menyokong grid, ia boleh digunakan sebagai alternatif yang berkesan untuk susun atur grid. (Walaupun grid telah meningkat dengan pesat dalam pelayar yang paling moden, Flexbox masih mempunyai pelbagai sokongan yang lebih luas, yang sangat praktikal jika anda memerlukan susun atur untuk berfungsi dengan baik di beberapa pelayar yang lebih tua.)

Kelebihan Flexbox

Beberapa kelebihan Flexbox termasuk:

Kandungan halaman boleh dibentangkan ke mana -mana arah (kiri, kanan, ke bawah, atau bahkan naik).

Perintah visual klip kandungan boleh diterbalikkan atau disusun semula.

• item boleh "fleksibel" diubahsuai sebagai tindak balas kepada ruang yang ada dan boleh diselaraskan dengan bekas mereka atau satu sama lain.
• Membuat susun atur lajur monospace (tanpa mengira jumlah kandungan dalam setiap lajur) sangat mudah.
Untuk menggambarkan pelbagai sifat dan kemungkinan, mari kita anggap susun atur mudah berikut sebagai contoh beberapa demonstrasi dalam artikel ini:

Langkah pertama adalah meletakkan unsur -unsur dalam

, iaitu

dan

<div class="example">
  <header>header content here</header>
  <main class="main">
    <nav>nav content here</nav>
    <div class="content">main content here</div>
    <aside>aside content here</aside>
  </main>
  <footer>footer content here</footer>
</div>

, dan memaparkannya bersebelahan. Tanpa Flexbox, kami mungkin menggunakan terapung untuk mengatur tiga elemen ini, tetapi ini tidak begitu langsung. Selain itu, kaedah tradisional membawa masalah yang terkenal: setiap lajur mempunyai ketinggian yang sama dengan ketinggian kandungannya. Oleh itu, anda perlu menetapkan ketinggian yang sama untuk ketiga -tiga lajur untuk menjadikannya konsisten panjang, atau menggunakan beberapa jenis helah.

.main Flexbox muncul. <nav> <aside>

Dapatkan menggunakan Flexbox

Inti

flexbox ialah nilai atribut , yang perlu ditetapkan sebagai elemen kontena. Melakukannya akan menjadikan unsur -unsur anaknya menjadi "barangan elastik". Item ini akan mendapat beberapa sifat mudah secara lalai. Sebagai contoh, mereka diletakkan bersebelahan, dan unsur -unsur tanpa lebar yang ditentukan secara automatik akan menduduki ruang yang tinggal.

Jadi, jika anda menetapkan display 's flex ke

, unsur -unsur kanak -kanak itu akan memerah secara automatik antara

dan .main. Bukankah sangat mudah tanpa sebarang pengiraan? Sebagai bonus tambahan, ketiga -tiga elemen ini secara ajaib mempunyai ketinggian yang sama. display

<div class="example">
  <header>header content here</header>
  <main class="main">
    <nav>nav content here</nav>
    <div class="content">main content here</div>
    <aside>aside content here</aside>
  </main>
  <footer>footer content here</footer>
</div>

Order Element: Flexbox order atribut

Satu lagi harta Flexbox adalah mudah untuk mengubah urutan elemen. Katakan anda telah membina susun atur di atas untuk pelanggan dan dia kini mahu .content muncul sebelum <nav>.

Biasanya, anda perlu menggali kod sumber HTML dan menukar pesanan di sana. Dengan Flexbox, anda boleh melakukan tugas ini sepenuhnya melalui CSS. Cukup tetapkan harta .content 's order ke -1 dan lajur kandungan akan berada di hadapan.

.main {
  display: flex;
}

Dalam kes ini, anda tidak perlu secara jelas mengisytiharkan nilai order untuk lajur lain.

kod sumber html menggunakan flexbox bebas daripada gaya CSS

tetapi pelanggan anda belum puas. Dia berharap <footer> adalah elemen pertama di halaman, walaupun sebelum <header>. Nah, Flexbox adalah rakan anda sekali lagi (walaupun dalam kes ini mungkin lebih baik untuk mendidik pelanggan anda dan bukan hanya mematuhi). Oleh kerana anda perlu menyusun semula elemen dalaman dan luaran, anda mesti menetapkan peraturan <div> untuk display: flex. Ambil perhatian bahawa anda boleh bersarang bekas Flex dalam laman web untuk mencapai hasil yang anda mahukan. Kerana <header>, <main> dan <footer> disusun secara menegak, anda perlu menetapkan konteks menegak terlebih dahulu, yang boleh anda lakukan dengan cepat dengan flex-direction: column. Juga, nilai <footer> adalah -1, jadi ia akan muncul pada halaman terlebih dahulu. Itu mudah. order

.main {
  display: flex;
}

.content {
  order: -1;
}

Jadi jika anda ingin menukar deretan elemen ke lajur atau sebaliknya, anda boleh menggunakan atribut

dan tetapkannya ke flex-direction atau column (row adalah lalai): row Walau bagaimanapun, semakin besar keupayaan, semakin besar tanggungjawab: ingat bahawa banyak pelawat akan menggunakan papan kekunci untuk melayari laman web berasaskan Flexbox anda, jadi jika urutan elemen dalam kod sumber HTML tidak sepadan dengan pesanan yang dipaparkan di skrin, kebolehcapaian boleh menjadi masalah yang serius.

bagaimana untuk menyelaraskan item dengan flexbox

Flexbox juga boleh menyelaraskan anak -anaknya secara langsung mendatar dan menegak.

anda boleh menggunakan

untuk memohon penjajaran yang sama untuk semua elemen dalam bekas Flex. Jika anda ingin menetapkan penjajaran yang berbeza untuk setiap projek, gunakan

. Penjajaran elemen bergantung kepada nilai atribut align-items. Jika nilainya align-self (iaitu, unsur -unsur disusun secara mendatar), penjajaran itu berlaku pada paksi menegak. Jika flex-direction ditetapkan kepada row (iaitu, unsur -unsur diatur secara menegak), ia digunakan pada paksi mendatar. flex-direction column Sebagai contoh, anda mempunyai beberapa bentuk yang anda mahu menyelaraskannya secara berbeza dalam elemen kontena. Anda perlukan:

• Tetapkan sifat align-self setiap bentuk kepada nilai yang sesuai. Nilai -nilai yang mungkin termasuk: center, stretch (unsur -unsur diposisikan agar sesuai dengan bekas mereka), flex-start, flex-end, dan baseline (unsur -unsur diletakkan pada garis dasar bekas mereka).
• Tetapkan elemen kontena ke display: flex.
• Akhirnya, perhatikan atribut flex-direction pada bekas induk, kerana nilainya mempengaruhi bagaimana unsur -unsur kanak -kanak diselaraskan.

<div class="example">
  <header>header content here</header>
  <main class="main">
    <nav>nav content here</nav>
    <div class="content">main content here</div>
    <aside>aside content here</aside>
  </main>
  <footer>footer content here</footer>
</div>

Jika semua elemen dalam bekas induk perlu diselaraskan dengan cara yang sama, anda boleh menggunakan atribut align-items dalam bekas induk. Nilai yang mungkin termasuk center, flex-start, flex-end, stretch (lalai: item tersebut diregangkan agar sesuai dengan bekasnya) dan baseline (item diposisikan pada garis dasar bekasnya).

.main {
  display: flex;
}

Gunakan Flexbox untuk menyelaraskan kandungan

Atribut penjajaran lain ialah justify-content, yang sangat mudah apabila anda ingin merata memperuntukkan ruang yang ada di antara pelbagai elemen.

Nilai yang boleh diterima termasuk: center, flex-start, flex-end, space-between (terdapat ruang antara item) dan space-around (terdapat ruang sebelum, antara dan selepas item).

Sebagai contoh, dalam elemen <main> dalam template HTML yang mudah yang anda gunakan, anda boleh mencari tiga elemen: <nav>, .content, dan <aside>. Pada masa ini, mereka semua ditolak ke kiri halaman. Sekiranya anda mahu ketiga -tiga elemen ini dipaparkan entah bagaimana untuk mewujudkan beberapa ruang di antara mereka dan bukannya membuat ruang secara berasingan di hujung kiri dan kanan unsur -unsur pertama dan terakhir, tetapkan .main (bekas induk mereka) ditetapkan ke justify-content : space-between

.main {
  display: flex;
}

.content {
  order: -1;
}

Gunakan flexbox untuk menyesuaikan saiz projek

Gunakan atribut

, anda boleh mengawal panjang elemen berbanding unsur -unsur lain dalam bekas Flex. flex

harta ini adalah singkatan bagi setiap sifat berikut:

• - Nombor yang menentukan berapa banyak elemen yang tumbuh berbanding dengan unsur -unsur elastik yang lain. flex-grow
• - Nombor yang menentukan berapa banyak elemen mengecut berbanding dengan elemen elastik yang lain. flex-shrink
• - Panjang elemen. Nilai yang boleh diterima termasuk: flex-basis, auto atau nombor diikuti oleh "%", "px", "em", atau mana -mana unit panjang lain. inherit
Contohnya, untuk mendapatkan tiga lajur monospace, hanya tetapkan

untuk setiap lajur:

flex: 1

Jika anda memerlukan kawasan kandungan menjadi dua kali lebih lebar sebagai

.example {
  display: flex;
  flex-direction: column;
}

footer {
  order: -1;
}

dan

, tetapkan <nav> untuk <aside> dan biarkan dua yang lain pada 1: .content flex: 2

lebih banyak sumber

Kesimpulan

Seperti yang anda lihat, jika anda perlu mengawal lokasi elemen di laman web anda, Flexbox dapat menjadikan kehidupan kita lebih mudah. Ia sangat dipercayai, membuat apa -apa helah, bekas lipat atau perkara -perkara pelik lain yang perlu kita hadapi setiap hari dari tarikh.

Seperti yang dinyatakan sebelum ini, pilihan yang lebih baik untuk susun atur halaman penuh hari ini adalah grid CSS, tetapi masih bernilai mengetahui tentang skop fungsi Flexbox. Flexbox adalah yang terbaik untuk menyelaraskan item yang berkaitan dalam satu dimensi, tetapi ia juga boleh menjadi alternatif yang mudah untuk grid yang bekerja di pelayar yang lebih tua jika diperlukan.

Soalan Lazim Mengenai CSS Flexbox

(soalan yang sering ditanya harus ditambah di sini untuk konsisten dengan dokumen asal)

Atas ialah kandungan terperinci Pengenalan mesra kepada Flexbox untuk pemula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!