Apa itu flexbox (dan mengapa Anda harus menggunakannya)

Anda dapat membangun bagian yang bersih sepanjang hari, tetapi menyelaraskan elemen di setiap ukuran layar dapat mulai terasa lebih seperti coba -coba daripada desain yang disengaja.

Flexbox memperbaikinya. Ini memberi Anda kendali nyata atas bagaimana elemen duduk, meregangkan, menyusut, dan membungkus di dalam wadah, tanpa penyesuaian margin dan bantalan yang konstan. Dalam panduan ini, kita akan memecah cara kerja FlexBox, bagaimana cara menyederhanakan tata letak, dan cara menggunakannya secara visual di dalam Divi 5 tanpa menulis satu baris kode.

Apa itu Flexbox

Flexbox, kependekan dari tata letak kotak yang fleksibel , adalah model tata letak yang menyederhanakan bagaimana elemen sejajar dan ruang sendiri di dalam wadah. Daripada memposisikan setiap item secara manual menggunakan margin atau lebar tetap, Flexbox memungkinkan Anda mendefinisikan bagaimana elemen -elemen tersebut harus berperilaku tergantung pada ruang yang tersedia.

Haruskah elemen tumbuh untuk mengisi ruang ekstra? Menyusut saat ruang kencang? Haruskah mereka membungkus ke baris berikutnya ketika mereka tidak lagi cocok? Anda membuat pilihan ini melalui serangkaian properti yang Anda terapkan pada wadah dan anak -anaknya. Beginilah cara Anda memutuskan bagaimana tata letak Anda harus merespons.

Mari kita ambil contoh praktis untuk memahami hal ini. Katakanlah Anda memiliki tiga tombol di dalam baris horizontal. Dengan Flexbox, Anda dapat memusatkan semuanya secara merata di dalam wadah:

Putuskan bahwa tombol tengah harus mengambil lebih banyak ruang daripada yang lain:

Atau Anda mungkin ingin tombolnya menumpuk secara otomatis saat layar menjadi lebih sempit:

Flexbox memungkinkan semua ini dengan properti sederhana seperti Justify-Content, Flex-Wrap, dan Flex-Grow.

Selain itu, ini memungkinkan Anda mengontrol bagaimana item ditempatkan, disejajarkan pada sumbu yang berbeda, dan dipesan secara visual, tanpa mengubah posisi sebenarnya di pembangun. Anda dapat memusatkan konten, mendorongnya ke atas atau bawah wadah, menyelaraskan satu item secara berbeda dari yang lain, atau bahkan membalikkan seluruh pesanan di seluruh breakpoint.

Anda mungkin berpikir: tidak bisakah saya melakukan ini dengan margin dan padding?

Anda benar. Anda dapat memusatkan elemen secara manual atau menyesuaikan ukurannya dengan lebar khusus. Namun, metode tersebut bergantung pada memposisikan setiap item secara individual. Anda menyesuaikan setiap elemen satu per satu, untuk setiap ukuran layar.

Flexbox menggeser proses itu sepenuhnya. Alih -alih memperlakukan setiap elemen secara terpisah, ini memungkinkan Anda mendefinisikan aturan tata letak di tingkat kontainer sekali. Anda memberi tahu wadah bagaimana anak -anaknya harus berperilaku dalam skenario yang berbeda, dan itu menyesuaikan mereka sesuai kebutuhan.

Pendekatan ini membuat tata letak lebih konsisten, lebih mudah dikelola, dan lebih fleksibel ketika desain berkembang, terutama ketika ukuran layar berubah atau modul baru ditambahkan.

Bagaimana arah fleksibel mempengaruhi penyelarasan

Salah satu pilihan pertama yang Anda buat di FlexBox adalah arah di mana elemen harus mengalir, baik dalam baris atau kolom. Properti Direksi Flex menetapkan ini dan mendefinisikan bagaimana item menyelaraskan, membungkus, dan ruang sendiri di dalam wadah.

Mari kita pahami ini lebih baik karena properti umum seperti justify-content dan align-content bergantung sepenuhnya pada arah mana yang diatur. Mereka tidak mengerjakan tata letak default browser, tetapi sumbu yang dibuat oleh FlexBox: sumbu utama dan sumbu silang . Sumbu utama mengikuti arah yang Anda atur dengan arah fleksibel: horizontal untuk baris, vertikal untuk kolom. Sumbu silang berjalan ke arah lain: vertikal untuk baris, horizontal untuk kolom.

Jadi, sumbu utama berjalan dari kiri ke kanan ketika arah diatur ke baris. Itu berarti Justify-Content menggerakkan elemen melintasi baris, dan menyelaraskan item mengontrol bagaimana mereka menyelaraskan secara vertikal di dalam baris itu.

Dan ketika Anda mengganti arah ke kolom, seluruh logika Alignment membalik. Sumbu utama sekarang berjalan dari atas ke bawah, yang berarti Justify-Content menyelaraskan item secara vertikal, dan align-item menyesuaikan posisinya dari kiri ke kanan.

Ini bisa terasa sedikit membingungkan pada awalnya, tetapi begitu Anda melihat bagaimana sumbu utama dan silang merespons arah, ia mengklik. Anda akan mulai menemukan pola, dan keputusan tata letak akan terasa lebih intuitif. Ada juga tabel referensi cepat di bawah ini jika Anda ingin memeriksa ulang hal-hal saat berlatih.

Sintaks & Properti Flexbox Umum

Ganti properti tampilan wadah dari blok ke flex untuk mengaktifkan flexbox. Saat Anda melakukan ini, browser mulai memperlakukan elemen dalam seperti baris, tombol, kartu, atau ikon sebagai item fleksibel.

.container {
display: flex;
}

Dari sana, Anda menggunakan berbagai sifat flexbox untuk mengontrol perilaku. Misalnya, Justify-Content memutuskan bagaimana item ditempatkan di sepanjang sumbu utama (ini diatur ke horizontal secara default, disutradarai fleksibel: baris) . Gunakan flex-start untuk menyelaraskan item ke kiri, fleksibel untuk mendorongnya ke kanan, tengah untuk memusatkannya, atau ruang-di antara dan ruang angkasa untuk menyebarkannya secara merata.

Secara default, Flexbox mencoba untuk menyesuaikan semua item pada satu baris. Jika ada terlalu banyak, mereka akan menyusut agar sesuai dengan pengaturan flex-shrink mereka, dan jika mereka tidak bisa menyusut, mereka dapat meluapnya wadah. Untuk mencegah hal ini, nyalakan bungkus fleksibel sehingga item pindah ke jalur baru alih-alih menjejalkannya.

Anda sudah dapat memikirkan banyak kasus penggunaan di mana kedua properti ini dapat menyelesaikan masalah tata letak. Tetapi ada banyak lagi, dan masing -masing memberi Anda kontrol khusus atas ukuran, pesanan, penyelarasan, dan jarak.

Jika Anda penasaran untuk melihat bagaimana ini benar-benar bekerja dengan cara yang menyenangkan dan langsung, cobalah Flexbox Froggy. Ini adalah permainan kecil yang menyenangkan di mana Anda menerapkan kode flexbox nyata untuk memindahkan katak di sekitar kolam. Sepanjang jalan, Anda berhenti menebak dan mulai mengenali dengan tepat apa yang dilakukan setiap properti.

Mengapa Menggunakan Flexbox

Sekarang, Anda telah melihat bagaimana FlexBox mengubah bagaimana tata letak merespons ruang. Tetapi nilai sebenarnya berasal dari apa yang memungkinkan Anda untuk melakukan lebih mudah. Flexbox mengubah tantangan tata letak keras kepala menjadi pola sederhana dan dapat digunakan kembali.

• Penyelarasan Sederhana: Properti seperti Justify-Content dan Align-Its Center atau Item Ruang tanpa mengandalkan tweak margin atau kelas pembantu.
• Responsif secara default: Item secara alami tumbuh, menyusut, atau bungkus tergantung pada ruang mereka. Ini menghasilkan tata letak yang lebih bersih yang beradaptasi tanpa menambahkan breakpoint.
• SPACING & UKURAN OTOMATIS: Anda mengontrol bagaimana elemen berbagi ruang dengan sifat-sifat seperti fleksibel, fleksibel, dan flex-basis, membuat cairan tata letak alih-alih diperbaiki.
• Pesan ulang tanpa mengubah HTML: Anda dapat mengubah urutan visual elemen tanpa menyentuh HTML. Struktur tetap bersih, sementara tata letak menyesuaikan layar yang berbeda.
• Lebih sedikit peretasan tata letak: Anda tidak perlu lagi mengapung, clearfixes, atau skrip pencocokan tinggi. Flexbox menggantikan mereka dengan opsi modern dan andal.

Dan karena didukung di semua browser utama, Flexbox tidak hanya efisien tetapi juga dapat diandalkan. Ini menjadikannya pilihan modern dan lebih dapat diandalkan untuk proyek dunia nyata.

Mengapa FlexBox seringkali lebih baik dari grid

Grid adalah sistem tata letak populer lainnya, seperti Flexbox. Namun, keduanya dibangun untuk kasus penggunaan yang berbeda.

Grid, misalnya, dirancang untuk tata letak dua dimensi di mana Anda membutuhkan kontrol atas kedua baris dan kolom. Pameran produk, galeri gambar, dan tata letak editorial bergaya majalah adalah contoh grid, karena mengandalkan struktur yang sejajar dengan ketat di kedua sumbu.

Anda mulai dengan mendefinisikan jaringan: berapa banyak baris dan kolom yang ada, dan seberapa lebar atau tinggi masing -masing seharusnya. Kemudian Anda menempatkan setiap item ke dalam struktur itu.

Ini adalah tata letak kisi. Item diselaraskan pada kedua sumbu: baris dan kolom, dengan jarak dan proporsi tetap.

Tetapi tidak setiap tata letak membutuhkan tingkat perencanaan itu.

Sebagian besar waktu, bagian UI mengalir dalam satu arah. Baris kartu, blok ikon-plus-teks, dan tautan navigasi mengikuti satu sumbu, bukan dua. Di situlah Flexbox cocok.

Dalam tata letak Flexbox, kartu disejajarkan dalam satu arah (baris atau kolom) dan kemudian dibungkus dan ditempatkan berdasarkan aturan kontainer.

Anda tidak perlu memetakan seluruh tata letak terlebih dahulu. Anda cukup memberi tahu wadah bagaimana item harus berperilaku di sepanjang sumbu tunggal, dan Flexbox menanganinya.

Jadi, kecuali Anda merancang sesuatu yang benar -benar tergantung pada kisi yang kaku, Flexbox akan sering menjadi lebih cepat, lebih sederhana, dan lebih fleksibel.

Flexbox di Divi 5

Semua yang telah kami pelajari sejauh ini tentang FlexBox sangat bagus, tetapi menulis CSS khusus untuk setiap tata letak tweak bukanlah yang ingin Anda lakukan, terutama jika Anda telah membangun situs Anda menggunakan pembangun visual seperti Divi.

Itu sebabnya Divi 5 sekarang termasuk kontrol flexbox bawaan. Anda tidak perlu lagi mengganti tab atau menambahkan CSS secara manual. Semua ini, dan bahkan perilaku tata letak lanjutan, sekarang dibangun ke dalam pembangun visual, dikurangi pengkodean dan backend yang luar biasa.

Berlangganan saluran YouTube kami

Singkat cerita, tidak perlu mengingat sintaks atau nama properti, cukup pilih apa yang Anda inginkan dari antarmuka. Klik pada bagian apa pun, baris, atau kolom, buka tab desain, dan di bawah tata letak> gaya tata letak , pastikan untuk menggunakan Flex.

Ini membuka satu set kontrol tata letak baru. Ini adalah properti inti flexbox yang biasanya Anda tulis di CSS, tetapi sekarang sebagai opsi yang dapat diklik. Anda dapat menguji perubahan langsung dan melihat bagaimana konten Anda bereaksi.

Jadi, bahkan jika Anda belum pernah menulis satu baris kode Flexbox, Anda tidak akan melewatkan apa pun. Divi 5 memberi Anda kontrol tata letak yang sama secara visual dengan tingkat kontrol yang sama, tetapi jauh lebih mudah.

Pelajari Segalanya Tentang Sistem Flexbox Divi 5

Struktur Baris Baru

Mengapa Divi Ketika Pembangun Web lain juga memilikinya? Sementara banyak pembangun web menawarkan FlexBox sebagai opsi tata letak, Divi 5 mendekatinya secara berbeda. Ini bukan fitur yang dilapisi di atas sistem yang ada; Sekarang menjadi inti dari bagaimana pembangun bekerja.

Seluruh mesin tata letak telah dibangun kembali dari bawah ke atas dengan flexbox di fondasi. Akibatnya, perilaku tata letak terasa lebih konsisten dan dapat diprediksi karena mengikuti logika tata letak yang dirancang dengan sengaja.

Misalnya, ketika Anda menambahkan bagian atau baris baru di Divi 5, Anda akan segera melihat sesuatu yang berbeda. Struktur baru. Masing -masing sekarang berjalan di Flexbox secara default, yang berarti penyelarasan, jarak, dan responsif ditangani lebih cerdas sejak awal.

Anda tidak perlu menyalakan fleksibel untuk elemen desain baru yang Anda tambahkan. Dan ketika Anda melakukannya, saat mengedit tata letak yang lebih tua, alat penyelarasan dan jarak menjadi lebih mudah dikelola secara instan.

Anda juga dapat mengubah cara kolom disusun di dalam baris menggunakan Struktur Kolom Ubah.

Ini membuka panel di mana Anda dapat memilih struktur kolom baru. Tata letak segera diperbarui, dengan Flexbox secara otomatis menyesuaikan jarak dan penyelarasan.

Coba tambahkan beberapa jenis baris yang berbeda dan mengubah ukuran layar. Anda akan melihat bagaimana semuanya bergeser dan beradaptasi tanpa rusak. Itulah kekuatan flexbox yang dipanggang ke dalam pembangun, menjadikan Divi 5 pilihan yang lebih andal dan modern.

Bagaimana Flexbox Bekerja Dalam Divi 5

Jika Anda memulai, inilah walkthrough cepat untuk membantu Anda merasa percaya diri saat menggunakan FlexBox di Divi 5.

Kontrol tata letak

Saat Anda mengganti bagian, baris, atau kolom ke tata letak yang melenturkan , satu set kontrol tata letak baru muncul di pengaturan desain> tata letak . Ini memberi Anda kontrol flexbox visual tepat di samping opsi biasa Anda.

• (1) Gaya tata letak: Di sinilah Anda mengaktifkan Flex. Setelah diatur, opsi spesifik fleksibel lainnya seperti arah, penyelarasan, dan jarak menjadi terlihat.
• (2) Celah Horizontal: Menambahkan ruang antara item dari kiri ke kanan.
• (3) Vertikal Gap: Mengatur ruang antara elemen bertumpuk saat menggunakan tata letak kolom.
• (4) Arah tata letak: mengubah aliran, baris, kolom, atau arah terbalik, sehingga item dapat menyelaraskan berdampingan atau atas ke bawah.
• (5) Membenarkan konten: Menyelaraskan item di sepanjang sumbu utama. Anda dapat memusatkannya, mendorong mereka ke satu sisi, atau menyebarkannya.
• (6) Sejajarkan item: Menyelaraskan item di sepanjang sumbu silang, yang sangat membantu saat mengatur item secara vertikal dalam baris horizontal.
• (7) Pembungkus tata letak: Ini memungkinkan item pindah ke baris berikutnya saat ruang habis. Bermanfaat saat membangun tata letak yang merespons ukuran layar alih -alih pecah.

Katakanlah Anda memiliki bilah merek dengan logo dan ingin mereka menjadi lebih besar. Dengan arah fleksibel yang diatur ke baris dan pembungkus tata letak dihidupkan, mereka akan secara otomatis mengalir ke dua baris ketika tidak ada ruang.

Menyelaraskan elemen dalam dua baris sekarang mudah tanpa pertanyaan media atau solusi manual.

Kontrol & Ukuran Kolom

Setelah berada di dalam baris yang diaktifkan fleksibel, setiap kolom memiliki pengaturan baru di bawah desain> ukuran yang disebut kelas kolom . Ini menentukan berapa banyak ruang yang dibutuhkan kolom berdasarkan konten dan lingkungannya.

Anda dapat memilih antara menyusut agar pas (yang membuat kolom hanya seluas isinya) atau tumbuh untuk diisi (yang meregangkan kolom untuk mengambil ruang ekstra).

Misalnya, jika Anda ingin kolom teks merasa lebih menonjol dan memiliki elemen kartu yang memeluk konten mereka, Anda akan mengatur kartu agar menyusut agar sesuai dan teks yang akan tumbuh.

Kontrol pesanan

Alat lain yang kuat, tetapi sering diabaikan, adalah pengaturan pesanan di bawah tab Konten . Ini memungkinkan Anda memesan ulang kolom dan modul secara visual tanpa mengubah struktur tata letak dalam tampilan wireframe atau lapisan.

Katakanlah Anda ingin modul tertentu muncul pertama kali di seluler tetapi kedua di desktop. Anda dapat menetapkan nilai pesanan yang berbeda di setiap breakpoint.

Kasus Penggunaan Praktis Flexbox

Mari kita lihat beberapa kasus penggunaan Flexbox lagi yang sekarang disederhanakan dengan Divi 5.

1. Secara vertikal sejajarkan apa pun dengan fleksibel

Untuk waktu yang lama, penyelarasan vertikal adalah salah satu masalah tata letak Web Design yang paling menjengkelkan. Anda akan mencoba trik padding, penentuan posisi absolut, margin manual, dan yang ada yang hanya berakhir dengan sesuatu yang terlihat bagus di desktop tetapi rusak di layar yang lebih kecil.

Dengan Divi 5, sakit kepala itu hilang. Sekarang, jika Anda ingin memusatkan konten secara vertikal di dalam bagian, Anda cukup mengatur item Align ke tengah.

Itu saja. Tata letak menyesuaikan secara otomatis di seluruh breakpoint, dan konten Anda selalu tetap di sweet spot. Apa yang digunakan untuk mengambil senam CSS sekarang hanya beberapa klik di dalam pembangun.

2. Menyamakan ketinggian kartu secara otomatis

Anda mungkin mengalami masalah ini sebelumnya. Anda membuat deretan kartu, seperti bagian uraian, dan semuanya terlihat baik -baik saja sampai satu item memiliki lebih banyak teks daripada yang lain. Tiba -tiba, tata letak Anda terasa tidak rata. Beberapa kolom meregang lebih tinggi, yang lain tetap pendek, dan desainnya kehilangan keseimbangan.

Pembersihan manual itu tidak lagi diperlukan. Saat Anda mengganti baris atau bagian untuk melenturkan, Divi menerapkan pengaturan default yang memperlakukan setiap kolom sebagai item flex. Ini membuat mereka secara otomatis meregangkan agar ketinggian satu sama lain dalam baris yang sama, terlepas dari konten di dalamnya.

Itu juga tetap responsif. Pada layar yang lebih kecil, kolom membungkus baris baru tanpa perlu penyesuaian tambahan, dan perilaku tinggi yang sama terus berlaku.

3. Tombol Bungkus Secara Otomatis di Breakpoints

Menjaga deretan tombol rapi dan mudah dibaca di berbagai ukuran layar bisa menjadi rasa sakit. Anda biasanya akhirnya menambahkan baris baru atau secara manual menyesuaikan tata letak untuk setiap breakpoint. Tetapi dengan Divi 5, itu tidak lagi diperlukan.

Nyalakan tata letak Flex dan aktifkan pembungkus tata letak di tampilan laptop . Itu saja. Tombol -tombol akan secara otomatis membungkus beberapa baris pada layar yang lebih kecil tanpa merusak tata letak.

Tombol -tombol menjaga jarak dan penyelarasannya di layar yang lebih besar dan menumpuk secara alami pada tablet dan telepon. Anda bahkan dapat menyempurnakan penyelarasan mereka menggunakan konten justify, dan mengontrol jarak di antara mereka menggunakan celah, jadi semuanya terlihat bersih dan disengaja dalam segala ukuran.

Divi + flexbox masuk akal

Anda telah melihat bagaimana Flexbox bekerja, bagaimana Divi 5 membuatnya visual, dan bagaimana sakit kepala tata letak umum sekarang membutuhkan waktu beberapa detik, bukan jam. Divi 5 tidak hanya mendukung Flexbox - itu dibangun di sekitarnya. Setiap bagian, baris, dan kolom siap berperilaku seperti yang Anda harapkan tanpa CSS khusus.

Flexbox bukan hanya opsi jika Anda mendesain dengan Divi 5. Ini default yang lebih pintar. Tata letak yang lebih bersih, lebih sedikit solusi, dan kontrol responsif dipanggang langsung ke pembangun. Itulah pergeseran, dan itu adalah sesuatu yang mempersiapkan Anda untuk masa depan desain web.