Panduan Pemula untuk Properti CSS Flexbox

Tata letak yang baik dimulai dengan model yang jelas untuk penyelarasan dan jarak. Flexbox menyediakan model itu dengan mengatur konten di sepanjang sumbu tunggal dengan kontrol yang dapat diprediksi atas arah, penyelarasan, pembungkus, dan kesenjangan.

Posting ini mencakup dasar -dasar properti CSS ini dan bagaimana mereka bekerja bersama. Setelah fundamental, kami menunjukkan bagaimana pendekatan yang sama diimplementasikan secara visual di Divi 5 menggunakan sistem tata letak Flexbox. Ayo sampai ke sana!

Apa itu CSS Flexbox?

Lalu lintas seluler menyalip desktop mengubah desain web. Pengembang membutuhkan tata letak yang berfungsi pada ponsel, tablet, dan desktop. Metode lama sering gagal.

Flexbox memperbaiki ini. CSS Flexbox membuat elemen beradaptasi. Tambahkan tampilan: Lentur ke wadah, dan anak -anak langsungnya menjadi fleksibel. Mereka dapat tumbuh, menyusut, atau tetap diperbaiki berdasarkan ruang.

Flexbox meletakkan item dalam garis lurus, baik baris kiri ke kanan atau kolom dari atas ke bawah. Anda memilih arah.

Wadah mengontrol tata letak. Anda mengatur bagaimana item menyelaraskan dan ruang, seperti menyebar secara merata, terpusat, atau ditumpuk. Properti Gap menambahkan ruang yang konsisten antara item tanpa margin tambahan atau bantalan. Teknik yang lebih tua membutuhkan matematika margin rumit dan sering pecah.

Metode tradisional membuat pilihan jarak acak: 10px di sini, 20px di sana, 40px di tempat lain. Nilai -nilai yang tersebar ini menyebabkan ketidakkonsistenan dan membuatnya sulit untuk mengetahui jarak mana yang berlaku. Properti celah menghapus dugaan dengan menggunakan satu aturan yang konsisten untuk semua elemen.

Panduan cepat untuk flexbox dan propertinya

Flexbox membagi menjadi dua kamp: Properti untuk wadah dan properti untuk item. Properti kontainer mempengaruhi seluruh grup, sedangkan properti item memungkinkan Anda mengubah elemen individual. Sebagian besar tata letak hanya membutuhkan beberapa properti ini, seperti:

Tampilan: Flex

Ubah elemen apa pun menjadi wadah fleksibel dengan menambahkan tampilan: flex. Anak -anak langsungnya menjadi barang yang fleksibel. Item berbaris dalam satu baris secara default alih -alih menumpuk seperti elemen blok standar. Sakit kepala jarak Anda hilang karena item fleksibel mengikuti aturan yang berbeda dari elemen reguler. Wadah sekarang mengontrol bagaimana anak -anaknya (atau item) berperilaku, dan Anda mendapatkan hasil yang dapat diprediksi alih -alih kejutan CSS yang biasa.

Direksi fleksibel

Pilih item arah yang mengalir. Gunakan baris untuk pengaturan kiri-ke-kanan.

dan kolom untuk menumpuk item secara vertikal.

Tambahkan terbalik ke salah satu, dan item membalik pesanan mereka sepenuhnya.

Pilihan ini menetapkan sumbu pusat Anda, yang memengaruhi cara kerja properti lain.

Beralih dari baris ke kolom mengubah bagaimana justify-content dan align-item berperilaku, jadi arah datang pertama dalam perencanaan Anda.

Konten Justifikasi

Properti ini mendistribusikan sisa ruang di sepanjang poros tengah Anda. Barang mengambil apa yang mereka butuhkan, dan kemudian properti ini menangani sisanya. Gunakan Flex-Start untuk mengikat semuanya di awal, center to cluster item di tengah, dan flex-end untuk menempatkan semuanya menjelang akhir. Pada saat yang sama, ruang angkasa digunakan untuk menyebarkan barang terpisah dengan celah yang sama. Nilai ruang-sekitar memberi setiap item ruang yang sama di kedua sisi, sedangkan ruang-bahkan menciptakan celah yang identik di mana-mana.

align-item

Ini menangani penyelarasan pada sumbu silang. Untuk tata letak horizontal, ini berarti penyelarasan vertikal. Untuk tata letak vertikal, ia mengontrol posisi horizontal. Ini mendukung nilai-nilai seperti Flex-Start, Center, Flex-End, Stretch, dan Baseline (bukan Nilai Space-*). Atur ke tengah, dan item sejajar dengan tengah terlepas dari ketinggiannya. Nilai standarnya adalah peregangan: item peregangan untuk mengisi ukuran silang wadah. Jika ukuran silang wadah adalah otomatis, itu sering sama dengan item tertinggi sehingga item tampak sama tinggi.

Flex-wrap

Memutuskan apa yang terjadi ketika barang kehabisan ruang. Default NowRap menyimpan semuanya pada satu baris dengan menyusutnya item. Beralih ke bungkus dan item yang tidak sesuai dengan drop ke jalur baru sambil mempertahankan ukuran yang disukai. Anda juga dapat membalikkan arah pembungkus. Pembungkus mengubah garis tunggal Anda menjadi beberapa baris, membuat tata letak yang menyerupai kisi -kisi.

celah

Ini menambah ruang antar item tanpa mengacaukan margin. Setel Gap: 20px, dan setiap item mendapatkan jarak yang konsisten. Anda dapat mengatur celah horizontal dan vertikal yang berbeda jika diperlukan. Ruang hanya muncul di antara item, bukan di sekitar tepi. Ini ketukan menghitung margin yang pecah saat Anda mengubah tata letak nanti.

Properti ini bekerja dengan baik setelah Anda memahami mereka. Bagian yang sulit adalah mengingat apa yang masing -masing lakukan dan mengetik semua CSS itu. Anda menulis beberapa kode, menyegarkan browser Anda, melihat itu tidak benar, lalu kembali dan menyesuaikan. Pembangun visual seperti Divi membalikkan ini dengan membiarkan Anda mengklik tombol alih -alih mengetik nama properti.

Divi 5 membuat flexbox visual

Seperti yang kami tetapkan, belajar Flexbox adalah satu hal; Mengingat apa yang membenarkan konten: ruang-antara adalah yang lain. Anda menghabiskan lebih banyak waktu mengetik properti daripada mendesain. Alih -alih menulis CSS, Anda menggunakan tombol dan slider yang menunjukkan dengan tepat apa yang dilakukan setiap opsi di Divi Builder. Divi 5 membawa ini ke flexbox, mengubah konsep abstrak menjadi kontrol langsung yang dapat diklik.

Sebelum kita menyelam lebih dalam, mari kita lihat divi apa itu.

Apa itu Divi?

Divi adalah pembangun situs web yang membuat WordPress bekerja untuk orang-orang yang menginginkan situs tampan tanpa kerumitan.

Anda dapat menyeret 200+ modul di sekitar halaman Anda dan mengubah teks tempat duduk. Pilih warna dan tontonlah muncul secara instan saat Anda bekerja di situs yang sebenarnya, bukan pratinjau yang mungkin berbohong kepada Anda nanti.

Tema ini mencakup 2000+ tata letak untuk restoran, fotografer, konsultan, dan bisnis lainnya, sehingga Anda dapat menemukan yang Anda sukai dan mengubahnya sampai berfungsi dengan baik untuk kebutuhan Anda.

Pembuat tema memberi Anda kendali atas setiap bagian dari situs Anda. Anda dapat merancang header yang menonjol alih -alih terlihat seperti orang lain, membangun halaman blog yang ingin dibaca orang, dan bahkan membuat 404 halaman Anda cukup menarik sehingga pengunjung tetap ada alih -alih pergi.

Divi ai membantu Anda membangun dengan cepat

Suatu kali, membuat tema dan templat berarti menyulap berbagai aplikasi untuk salinan, gambar, dan ide desain. Divi Ai mengumpulkan semua yang Anda butuhkan menjadi satu antarmuka terpadu: Tepat di mana Anda membangun situs web Anda.

Katakan Anda membutuhkan teks, dan itu menulisnya.

Mintalah gambar khusus, dan itu membuatnya. Anda bahkan dapat menggambarkan pengeditan foto dan menontonnya membuat perubahan.

Plus, ini menangani kode dan membangun bagian baru saat Anda bertanya.

Divi Quick Site menyelamatkan Anda dari menatap halaman kosong tanpa tahu harus mulai dari mana. Anda dapat memilih dari situs pemula yang dirancang tim kami, dengan gambar asli dan karya seni yang terlihat bagus.

Anda juga dapat menggambarkan bisnis Anda ke situs cepat divi dan membiarkannya membangun sesuatu dari awal menggunakan AI. Situs-situs buatan AI ini hadir dengan berita utama, salinan, dan gambar yang sesuai dengan deskripsi Anda.

Hasilkan semuanya dengan AI, ambil foto dari Unsplash, atau jatuhkan placeholder untuk gambar Anda. Atur font dan warna Anda terlebih dahulu, lalu biarkan AI bekerja di sekitar pilihan merek Anda sambil menjaga semuanya dapat diedit sesudahnya.

Divi 5: Pembuat Situs Web Masa Depan

Divi 5 membangun kembali seluruh kerangka kerja dari bawah ke atas.

Visual Builder berjalan lebih halus, halaman membuat lebih cepat, dan basis kode dapat lebih efektif mendukung standar web modern. Anda mendapatkan markup yang lebih bersih, kinerja yang lebih baik, dan fondasi yang siap untuk saat ini dan masa depan.

Antarmuka juga dirampingkan. Pengaturan tampaknya lebih terorganisir secara logis, dan tugas sehari -hari membutuhkan lebih sedikit klik. Pengalaman keseluruhan terasa lebih responsif, tidak peduli jika Anda membangun halaman sederhana atau tata letak yang kompleks.

Anda mendapatkan pendekatan bangunan visual yang sama dengan yang Anda tahu, hanya dengan fondasi yang jauh lebih kuat di bawahnya.

Apa yang Baru di Divi 5

Arsitektur baru ini membuka pintu untuk fitur yang tidak mungkin sebelumnya. 18+ tambahan ini mengubah cara Anda membangun dan mengelola situs web.

Inilah contoh dari apa yang Anda dapatkan:

• Sistem Layout Flexbox: Kontrol visual untuk penyelarasan, jarak, dan penentuan posisi. Elemen dapat tumbuh, menyusut, atau membungkus ke jalur baru secara otomatis. Bekerja dengan baris bersarang dan kelompok modul untuk tata letak yang kompleks tanpa kode.
• Baris bersarang: Masukkan barisan di dalam baris lain dengan sarang tak terbatas. Bangun struktur tata letak yang kompleks tanpa solusi kode.
• 17 Modul WooCommerce: Pembangun Halaman Produk Lengkap termasuk Galeri Produk, Tambahkan ke Keranjang, Ulasan, Peringkat, Pemberitahuan Saham, Remah Breadscrumbs, Meta Produk, Upsells, dan banyak lagi. Modul keranjang dan checkout segera hadir.
• Sistem Interaksi: Buat pop-up, rogen, animasi gulir, efek gerakan mouse, dan pemicu viewport. Campurkan beberapa pemicu untuk perilaku kompleks seperti spanduk promosi yang memudar setelah menggulir.
• Editor Responsif: Memungkinkan Anda melihat, mengedit, dan mengatur ulang hover responsif dan stik stik untuk pengaturan apa pun secara bersamaan tanpa mengganti mode tampilan untuk pengeditan yang lebih cepat, lebih tepat, dan kurang berantakan.>
• Loop Builder: Bangun konten dinamis yang menarik dari database Anda. Buat tata letak pos khusus, kisi -kisi produk, dan bagian yang berulang. Bekerja dengan produk WooCommerce.
• Preset Grup Opsi: Buat gaya yang dapat digunakan kembali untuk tipografi, perbatasan, bayangan, dan latar belakang. Oleskan ini di seluruh elemen yang kompatibel, bukan hanya modul tunggal.
• Variabel Desain: Tetapkan nilai global untuk warna, font, jarak, angka, gambar, dan teks. Ubah warna utama Anda sekali, dan itu akan memperbarui di mana -mana secara otomatis.
• Unit CSS tingkat lanjut: Gunakan klem (), calc (), min (), dan max () berfungsi melalui kontrol visual. Tidak ada kode yang diperlukan untuk tipografi responsif dan perhitungan jarak.
• Warna Relatif dan HSL: Buat sistem warna yang indah secara matematis. Bangun variasi warna yang secara otomatis mempertahankan harmoni ketika warna dasar diubah.

Dan lebih banyak lagi yang akan datang! Tim pengembangan kami terus menambahkan fitur ~ setiap dua minggu saat mereka bersiap untuk rilis beta publik.

Tinjauan cepat pengaturan Flexbox Divi 5

Pendekatan visual Divi 5 menghilangkan dugaan dari implementasi Flexbox. Alih -alih menghafal nama properti dan mengetik CSS, Anda mendapatkan tombol dan slider yang menunjukkan apa yang dilakukan setiap kontrol. Lihat betapa mudahnya itu.

1. Menyiapkan baris fleksibel pertama Anda

Mulailah dengan memilih struktur baris Anda dari pemilihan templat yang diperluas. Divi 5 menawarkan lebih banyak opsi tata letak, termasuk kolom yang sama, grid multi-baris, dan pengaturan multi-kolom.

Bagian baru di Divi 5 dimulai dengan FlexBox secara otomatis. Saat Anda menambahkan baris baru, siap dengan sifat fleksibel dihidupkan. Tetapi jika Anda bekerja dengan bagian yang ada dari versi Divi yang lebih lama, Anda harus mengubahnya secara manual dari tata letak blok default untuk melenturkan dengan mengklik ikon pengaturan di baris Anda, menavigasi ke tab desain> tata letak, dan mengubah "blok" menjadi "melenturkan."

2. Memahami arah, aliran, penyelarasan

Bidang arah tata letak Anda menentukan di mana item berakhir. Baris adalah pengaturan default, yang membuat item berbaris secara horizontal.

Beralih ke kolom, dan elemen tumpukan item secara vertikal seperti tata letak web biasa.

Kedua opsi datang dengan versi terbalik yang membalikkan pesanan sepenuhnya.

Sementara itu, Konten Justifikasi menentukan apa yang terjadi dengan sisa ruang di sepanjang sumbu utama Anda. Untuk baris, mulailah berarti pusat kiri, tengah secara horizontal, dan berakhir sejajar dengan benar.

Untuk kolom, mulai berarti atas, tengah tengah, dan end mendorong item ke bawah.

Di luar start standar, pusat, dan penyelarasan akhir, Anda juga memiliki ruang di antara barang -barang spread terpisah dengan celah yang sama, sempurna untuk menu navigasi atau tata letak kartu.

Ruang di sekitar memberi setiap item ruang pernapasan yang sama di kedua sisi, yang berguna saat Anda menginginkan margin yang konsisten. Dan, ruang merata menciptakan celah yang identik di mana -mana, ideal untuk jarak visual yang seimbang.

Sejajarkan item berfungsi tegak lurus dengan arah aliran Anda. Jika Anda memilih tata letak baris, ini mengontrol posisi vertikal item.

Jika Anda memilih tata letak kolom, ia menangani perataan horizontal.

Pusat menjaga semuanya selaras dengan tengah, start memposisikan item di tepi awal, ujungnya mendorong mereka ke tepi yang jauh, dan peregangan membuat item mengisi ruang yang tersedia.

Kontrol ini menyelesaikan sakit kepala tata letak umum tanpa perhitungan CSS khusus.

3. jarak keluar dengan kontrol celah

Kontrol celah menambah ruang antara item fleksibel di wadah Anda: kolom, modul, dan jenis jenis konten apa pun berfungsi. Kesenjangan membuat ruang bernafas tanpa bantalan berantakan atau margin matematika. Kesenjangan hanya muncul di antara item, tidak di sekitar tepi luar.

Atur celah horizontal Anda ke 20px, dan setiap kolom akan memiliki jarak yang tepat.

Ubah celah vertikal menjadi 20px, dan semua kesenjangan akan segera diperbarui.

Divi 5 mendukung unit CSS canggih seperti panjang dan persentase viewport. Anda dapat menggunakan clamp () untuk celah responsif yang skala antara ukuran layar. Fungsi calc (), yang menggabungkan unit seperti calc (2rem + 10px), juga didukung.

Kontrol celah di sini juga mendukung variabel desain. Tambahkan variabel angka yang disebut "celah kolom horizontal" dengan klem (16px, 2vw, 32px) sebagai nilainya. Terapkan variabel itu ke kontrol celah di seluruh situs Anda.

Ketika Anda ingin jarak yang lebih ketat nanti, edit variabel; Setiap celah akan segera diperbarui.

4. Mengontrol bagaimana item membungkus

Layout Wrapping mengontrol apa yang terjadi ketika item kehabisan ruang horizontal. Pengaturan Wrap Default No Wrap menjaga semuanya pada satu baris dengan menyusutnya item agar sesuai dengan wadah. Beralih ke bungkus dan barang -barang yang tidak sesuai dengan drop ke jalur baru sambil mempertahankan ukuran alami mereka.

Wrap Reverse melakukan hal yang sama dengan bungkus biasa, tetapi membalikkan arah. Baris baru muncul di atas yang sebelumnya, bukan di bawah ini.

Ini memberi Anda kendali atas hierarki visual saat item meluap. Perilaku pembungkus tetap konsisten di ukuran layar yang berbeda, sehingga tata letak Anda beradaptasi dapat diprediksi dari desktop ke ponsel tanpa pecah.

Divi 5 juga memberi Anda kontrol penyelarasan pembungkus. Fitur ini muncul secara otomatis ketika Anda mengaktifkan pembungkus fleksibel dan formulir multi-baris. Ketika arah diatur ke baris, penyelarasan pembungkus tersedia untuk penyelarasan vertikal.

Demikian juga, untuk arah kolom, opsi untuk penyelarasan horizontal.

Peregangan membuat semua garis meluas untuk mengisi ruang vertikal yang tersedia. Mulailah tandan garis di awal, cluster tengah di tengah, dan akhiri dengan mendorong mereka ke arah tepi yang berlawanan.

Ruang di antara garis spread terpisah dengan celah yang sama, ruang di sekitar memberikan setiap garis ruang pernapasan yang sama di kedua sisi, dan ruang secara merata menciptakan celah yang identik antara semua garis.

Ini berfungsi dengan baik untuk tata letak kartu, galeri gambar, atau konten apa pun yang perlu mengalir secara alami di berbagai baris. Item mempertahankan proporsi dan jaraknya saat mengatur ulang berdasarkan lebar yang tersedia. Anda mendapatkan istirahat bersih tanpa barang -barang yang dihancurkan bersama di layar kecil.

5. Bekerja di berbagai ukuran layar

Tujuh breakpoint Divi 5 memberi Anda kontrol granular atas bagaimana tata letak Anda beradaptasi.

Setiap breakpoint bekerja secara mandiri, sehingga Anda dapat mengalihkan arah tata letak ke kolom di ponsel sementara tata letak baris desktop tetap tidak tersentuh. Anda mungkin memusatkan semuanya di ponsel, tetapi menjaga ruang itu di antara penyelarasan di layar yang lebih besar.

Pengaturan tiga kolom desktop Anda dapat menjadi tumpukan satu kolom di ponsel tanpa memengaruhi titik puncak tengah. Setiap ukuran layar mendapatkan yang paling cocok untuk pengalaman menonton itu.

Editor responsif baru membuat proses ini jauh lebih lancar. Klik ikon editor responsif di sebelah pengaturan apa pun untuk melihat dan memodifikasi nilai untuk semua ukuran layar sekaligus.

Namun, jika Anda menggunakan nilai klem () untuk menguasai baris dan kolom Anda, itu akan secara otomatis skala antara breakpoint tanpa memerlukan perubahan manual.

6. Membuat Preset Grup Opsi

Setelah Anda mendapatkan tata letak FlexBox Anda sesuai dengan cara yang Anda inginkan, Anda dapat menyimpan pengaturan tersebut sebagai preset grup opsi dengan mengklik opsi Opsi Grup Preset dan memberi label dengan tepat.

Nilai kesenjangan Anda, pilihan penyelarasan, dan pengaturan bungkus dibundel bersama. Saat Anda mengklik Simpan, konfigurasi tata letak yang tepat menjadi dapat digunakan kembali di situs Anda. Saat Anda ingin menggunakan preset yang disimpan, klik ikon preset pada baris baru dan pilih preset yang baru saja Anda simpan.

Preset menjaga unit canggih Anda tetap utuh. Transfer jarak responsif Anda dengan semua matematika yang Anda atur, dan perubahan bahkan dilakukan pada breakpoint yang berbeda.

Mulailah dengan FlexBox Divi 5 hari ini

Flexbox menghilangkan margin dan padding matematika yang pecah saat Anda mengubah tata letak. Anda berhenti mengutak -atik desain responsif dengan pertanyaan media dan bagian khusus.

Divi 5 mengubah sifat CSS abstrak ini menjadi kontrol visual. Anda dapat mengklik tombol untuk mengatur arah, seret slider untuk menyesuaikan celah, dan mengaktifkan dan menonaktifkan pembungkus. Editor responsif menangani ketujuh breakpoint dari satu panel, jadi Anda melihat hasilnya secara instan alih -alih menebak kode.

Simpan kombinasi yang berhasil sebagai preset dan gunakan kembali di mana saja. Anda menghabiskan waktu merancang alih -alih men -debug sintaks CSS.