Membuat susun atur yang fleksibel dengan flexbox

Flexbox: A CSS Layout Powerhouse

flexbox, atau modul susun atur kotak fleksibel CSS, memudahkan susun atur satu dimensi-mengatur item dalam baris atau lajur. Memohon

(atau display: flex) ke bekas mengubah anak -anak langsung ke dalam item Flex, yang ditadbir oleh peraturan Flexbox. Ini menyelaraskan pengekodan untuk pelbagai corak UI, seperti bentuk fleksibel atau pusat menegak. Pilih Flexbox di atas grid apabila menyelaraskan item secara mendatar display: inline-flex atau secara menegak, tetapi tidak kedua -duanya; Grid cemerlang pada pengaturan dua dimensi (baris dan lajur).

Flexbox Fundamentals

Sebelum grid CSS, Flexbox memerintah tertinggi untuk susun atur paksi tunggal (baris atau lajur menggunakan

atau flex-direction: row). Hanya menambah column ke bekas memulakan konteks pemformatan flex untuk anak -anaknya. Nota: Penyemak imbas yang lebih tua mungkin memerlukan awalan vendor seperti display: flex atau -webkit-flex. -moz-flex

Imej di bawah menggambarkan bagaimana anak -anak langsung dari bekas flex menjadi item flex. Ini boleh menjadi elemen atau nod teks yang tidak kosong. Tanpa gaya lanjut, item mempunyai ketinggian yang sama (berdasarkan tertinggi), timbunan secara mendatar (atau menegak dalam mod penulisan menegak), dan tidak mempunyai jarak. Mereka mungkin melimpah bekas.

Aplikasi Flexbox Praktikal

Flexbox memudahkan susun atur kompleks. Pertimbangkan contoh -contoh ini:

1. Komponen Objek Media:

Objek media tradisional (imej bersama teks) yang sebelum ini diperlukan terapung dan hacks clearfix. Flexbox menghapuskan ini:

Kod ringkas ini mencapai hasil yang sama, secara dinamik menyesuaikan diri dengan saiz imej.

.media__object { display: flex; }
.media__object img { margin-right: 20px; }

2. Komponen bentuk fleksibel:

Membuat bentuk responsif tidak mudah dengan Flexbox. Property

shorthand (menggabungkan

, flex, dan flex-grow) mengawal saiz item: flex-shrink flex-basis

input berkembang, sementara butang tetap tetap 150px. Ingat bahawa nilai

div { display: flex; }
input[type="text"], button { border: 0; font: inherit; }
input[type="text"] { flex: 1 0 auto; } /* Expands to fill space */
button { background: #003; color: whitesmoke; display: block; text-align: center; flex: 0 0 150px; } /* Fixed width */

dan

adalah berkadar. flex-grow flex-shrink

3. Pusat menegak:

kandungan berpusat secara menegak dipermudahkan dengan

:

align-items: center

Pusat ini melengkapkan item dalam bekas mereka.

.flex-container { display: flex; align-items: center; }

4. Susun atur seperti grid:

Walaupun grid sesuai untuk grid, Flexbox boleh membuat susun atur yang boleh disesuaikan menggunakan

dan menyesuaikan flex-wrap: wrap dan flex-basis: flex-grow

.media__object { display: flex; }
.media__object img { margin-right: 20px; }

flexbox vs grid: memilih alat yang betul

Gunakan grid untuk susun atur dua dimensi; Gunakan Flexbox untuk susun atur paksi tunggal yang memerlukan penjajaran mendatar atau menegak, tetapi tidak kedua-duanya. Sering kali, projek menggabungkan kedua -dua teknik untuk hasil yang optimum.

Pembelajaran lebih lanjut:

Rujuk CSS-Tricks '"Panduan Lengkap untuk Flexbox" dan sumber-sumber lain untuk menyelam yang lebih mendalam ke dalam keupayaan Flexbox.

Atas ialah kandungan terperinci Membuat susun atur yang fleksibel dengan flexbox. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!