Kolom Setara Dengan Flexbox: Ini Lebih Rumit Daripada yang Anda Pikirkan

Anda mendapatkan desain yang tampak bagus diserahkan kepada Anda dan memiliki bagian pahlawan besar yang bagus ini, diikuti oleh salah satu dari tiga kolom tepat di bawahnya. Anda tahu, seperti hampir semua situs web lain yang pernah Anda kerjakan.

Anda menggedor bagian pahlawan dan mulai mengerjakan bagian tiga kolom. Saatnya mengeluarkan flexbox teman tepercaya kami! Kecuali, Anda menulis display: flex dan Anda mendapatkan kekacauan ini alih-alih mendapatkan tiga kolom yang sama seperti yang Anda harapkan.

Ini terjadi karena cara flexbox menghitung ukuran dasar suatu elemen . Anda mungkin telah membaca banyak tutorial flexbox, dan banyak di antaranya (termasuk saya sendiri) adalah contoh yang terlalu sederhana tentang apa yang dilakukan flexbox tanpa benar -benar menggali hal-hal rumit yang dilakukan flexbox untuk kita yang kita anggap remeh.

Saya yakin Anda telah melihat contoh dan tutorial yang terlihat seperti ini, di mana tiga div menyusut di sekitar konten yang ada di dalamnya:

Dengan kata lain, kami mendapatkan beberapa elemen tingkat blok menyusut dan ditempatkan di samping satu sama lain. Rasanya seperti flex ingin hal-hal menjadi sekecil mungkin. Namun pada kenyataannya, flexbox sebenarnya menginginkan segala sesuatunya menjadi sebesar mungkin.

Tunggu, apa ? Flex mengecilkan hal-hal secara default — itu tidak benar! Baik?

Sehebat flexbox, apa yang dilakukannya di bawah tenda sebenarnya agak aneh karena, secara default, ia melakukan dua hal sekaligus. Pertama-tama terlihat pada ukuran konten yang akan kita dapatkan jika dengan mendeklarasikan width: max-content pada suatu elemen. Tetapi di atas itu, flex-shrink juga melakukan beberapa pekerjaan yang memungkinkan item menjadi lebih kecil, tetapi hanya jika diperlukan .

Untuk benar-benar memahami apa yang terjadi, mari kita uraikan keduanya dan lihat bagaimana mereka bekerja bersama.

Menyelam ke max-content

max-content adalah nilai properti yang cukup berguna dalam situasi tertentu, tetapi kami ingin memahami cara kerjanya dalam situasi khusus ini di mana kami mencoba untuk mendapatkan tiga kolom sama yang tampaknya sederhana. Jadi mari kita singkirkan flexbox sejenak dan lihat apa yang dilakukan max-content dengan sendirinya.

MDN melakukan pekerjaan yang baik untuk menjelaskannya :

Kata max-content mewakili lebar maksimum intrinsik konten. Untuk konten teks ini berarti konten tidak akan terbungkus sama sekali meskipun menyebabkan overflow.

Intrinsic mungkin membuat Anda keluar dari sini, tetapi pada dasarnya itu berarti kami membiarkan konten memutuskan lebarnya, daripada kami secara eksplisit menetapkan lebar yang ditetapkan. Uri Shaked dengan tepat menggambarkan perilaku tersebut dengan mengatakan "browser berpura-pura memiliki ruang tak terbatas, dan meletakkan semua teks dalam satu baris sambil mengukur lebarnya."

Jadi, intinya, max-content memungkinkan konten itu sendiri untuk menentukan lebar elemen. Jika Anda memiliki paragraf, lebar paragraf itu akan menjadi teks di dalamnya tanpa jeda baris. Jika itu paragraf yang cukup panjang, maka Anda akan berakhir dengan beberapa pengguliran horizontal.

Mari kita tinjau kembali contoh yang terlalu sederhana dari tiga elemen tingkat blok yang menyusut dan ditempatkan di samping satu sama lain. Itu tidak terjadi karena flex-shrink ; itu terjadi karena itulah ukuran elemen-elemen itu ketika lebar yang dideklarasikan adalah max-content . Itu benar-benar selebar mereka karena itu selebar konten gabungan di dalam setiap elemen.

Di sini, lihat elemen-elemen itu tanpa flexbox melakukan hal-hal flexbox, tetapi dengan width: max-content di sana sebagai gantinya:

Jadi, ketika hanya ada sedikit teks, max-content intrinsik menyusutkan segalanya alih-alih flex-shrink . Tentu saja, flexbox juga hadir dengan flex-direction: row default: perilaku baris yang mengubah item fleksibel menjadi kolom, menempatkannya tepat di samping satu sama lain. Berikut tampilan lain tetapi dengan ruang kosong disorot.

Menambahkan flex-shrink ke persamaan

Jadi kita melihat bahwa mendeklarasikan display: flex mendorong max-content pada item fleksibel. Item tersebut ingin menjadi sebesar konten mereka. Tetapi ada default lain yang datang di sini juga, yaitu flex-shrink .

flex-shrink pada dasarnya melihat semua item flex di wadah fleksibel untuk mak e yakin mereka tidak meluap orangtua. Jika semua item fleksibel bisa muat di samping satu sama lain tanpa memenuhi wadah fleksibel, maka flex-shrink tidak akan melakukan apa-apa… tugasnya sudah selesai.

Tetapi jika item fleksibel memenuhi wadah (berkat max-content ), item fleksibel diizinkan menyusut untuk mencegah luapan itu karena flex-shrink mencarinya.

Inilah sebabnya mengapa flex-shrink memiliki nilai default 1 . Tanpa itu, segalanya akan menjadi berantakan dengan cepat.

Inilah mengapa kolomnya tidak sama

Kembali ke skenario desain kami di mana kami membutuhkan tiga kolom yang sama di bawah pahlawan, kami melihat bahwa kolom tidak memiliki lebar yang sama. Itu karena flexbox mulai dengan melihat ukuran konten setiap item fleksibel bahkan sebelum berpikir untuk mengecilkannya.

Menggunakan DevTools Firefox (karena memiliki beberapa visualisasi flexbox unik yang tidak dimiliki orang lain), kita sebenarnya dapat melihat bagaimana flexbox menghitung semuanya.

Demi kesederhanaan, saat kita menyelam lebih dalam ke ini, mari bekerja dengan beberapa angka bulat yang bagus. Kita dapat melakukan ini dengan mendeklarasikan lebar pada item fleksibel kita. Saat kita mendeklarasikan lebar pada item fleksibel, kita membuang ukuran intrinsik itu ke luar jendela, karena sekarang kita telah mendeklarasikan nilai eksplisit . Hal ini membuat mencari tahu apa yang sebenarnya terjadi jauh lebih mudah.

Di Pena di bawah ini, kami memiliki induk yang merupakan wadah fleksibel lebar 600px display: flex ). Saya telah menghapus apa pun yang mungkin memengaruhi angka, jadi tidak ada gap atau padding . Saya juga mengganti border untuk outline sehingga kami masih dapat memvisualisasikan semuanya dengan mudah.

Item fleksibel pertama dan ketiga memiliki width: 300px dan yang tengah memiliki width: 600px . Jika kita menambahkan semuanya, totalnya adalah 1200px . Itu lebih besar dari 600px tersedia di dalam induk, jadi flex-shrink masuk.

flex-shrink adalah rasio. Jika semuanya memiliki flex-shrink (yaitu 1 secara default), semuanya menyusut pada tingkat yang sama. Itu tidak berarti mereka semua menyusut ke ukuran yang sama atau dengan jumlah yang sama , tetapi mereka semua menyusut pada tingkat yang sama.

Jika kita melompat kembali ke Firefox DevTools, kita dapat melihat ukuran dasar, flex-shrink dan ukuran akhir. Dalam hal ini, dua 300px sekarang menjadi 150px , dan yang 600px sekarang menjadi 300px .

Dua elemen yang memiliki lebar dasar 300px menjadi 150px .
Elemen yang lebih besar dengan lebar dasar 600px menjadi 300px .

Jika kita menjumlahkan semua ukuran dasar dari ketiga item fleksibel (lebar sebenarnya yang kita nyatakan pada mereka), totalnya menjadi 1200px . Wadah fleksibel kami memiliki lebar 600px Jika kita membagi semuanya dengan 2, itu cocok! Mereka semua menyusut dengan laju yang sama, membagi lebarnya sendiri dengan 2 .

Tidak sering kita memiliki angka bulat yang bagus seperti itu di dunia nyata, tetapi saya pikir ini melakukan pekerjaan yang bagus yang menggambarkan bagaimana flexbox melakukan apa yang dilakukannya ketika mencari tahu seberapa besar untuk membuat sesuatu.

Membuat kolom menjadi sama

Ada beberapa cara berbeda untuk mendapatkan lebar tiga kolom yang kita inginkan, tetapi beberapa lebih baik daripada yang lain. Untuk semua pendekatan, ide dasarnya adalah kita ingin semua ukuran dasar kolom menjadi sama . Jika mereka memiliki ukuran dasar yang sama, maka mereka akan menyusut (atau tumbuh, jika kita menggunakan flex-grow ) pada tingkat yang sama ketika flexbox melakukan hal-hal yang melenturkan, dan secara teori, itu seharusnya membuatnya berukuran sama.

Ada beberapa cara umum untuk melakukan ini, tetapi seperti yang saya temukan saat menyelami semua ini, saya menjadi percaya bahwa pendekatan itu cacat. Mari kita lihat dua solusi paling umum yang saya lihat digunakan di alam liar, dan saya akan menjelaskan mengapa mereka tidak berhasil.

Metode 1: Menggunakan flex: 1

Salah satu cara kita dapat mencoba untuk membuat semua item fleksibel memiliki ukuran dasar yang sama adalah dengan mendeklarasikan flex: 1 pada semuanya:

 .flex-parent { display: flex; } .flex-parent > * { flex: 1; }

Dalam tutorial yang saya buat sekali, saya menggunakan pendekatan yang berbeda, dan saya pasti memiliki 100 orang yang bertanya mengapa saya tidak menggunakan flex: 1 sebagai gantinya. Saya menjawab dengan mengatakan saya tidak ingin menyelami properti steno flex Tapi kemudian saya menggunakan flex: 1 di demo baru, dan yang mengejutkan saya, itu tidak berhasil .

Kolom tidak sama.

Kolom tengah di sini lebih besar dari dua lainnya. Ini bukan satu ton, tetapi seluruh pola desain yang saya buat hanya agar Anda memiliki kolom yang sama persis setiap saat, apa pun kontennya.

Jadi mengapa itu tidak berhasil dalam situasi ini? Pelakunya di sini adalah padding pada komponen di kolom tengah.

Dan mungkin Anda akan mengatakan itu konyol untuk menambahkan padding ke salah satu item dan bukan yang lain, atau bahwa kita dapat membuat sarang (kita akan membahasnya). Namun, menurut pendapat saya, saya harus dapat memiliki tata letak yang berfungsi terlepas dari konten yang kami masukkan ke dalamnya. Lagi pula, web adalah tentang komponen yang dapat kita pasang dan mainkan akhir-akhir ini.

Ketika saya pertama kali mengatur ini, saya yakin itu akan berhasil, dan melihat masalah ini muncul membuat saya ingin mempelajari apa yang sebenarnya terjadi di sini.

flex melakukan lebih dari sekadar mengatur flex-grow: 1 . Jika Anda belum tahu, flex adalah singkatan dari flex-grow , flex-shrink , dan flex-basis .

Nilai default untuk properti konstituen tersebut adalah:

 .selector { flex-grow: 0; flex-shrink: 1; flex-basis: auto; }

Saya tidak akan mendalami flex-basis dalam artikel ini, karena itu adalah sesuatu yang telah dilakukan Robin dengan baik . Untuk saat ini, kita dapat menganggapnya seperti width untuk menjaga hal-hal sederhana karena kita tidak bermain dengan flex-direction .

Kita telah melihat bagaimana flex-shrink bekerja. flex-grow adalah kebalikannya. Jika ukuran semua item fleksibel di sepanjang sumbu utama lebih kecil dari induknya, item tersebut dapat tumbuh untuk mengisi ruang tersebut.

Jadi secara default, item fleksibel:

  • tidak tumbuh;
  • jika mereka sebaliknya akan meluap orang tua, mereka diizinkan untuk menyusut;
  • lebarnya bertindak seperti max-content .

Menyatukan itu semua, flex default ke:

 .selector { flex: 0 1 auto; }

Hal yang menyenangkan dengan flex adalah Anda dapat menghilangkan nilai. Jadi, ketika kita mendeklarasikan flex: 1 , itu menyetel nilai pertama, flex-grow , ke 1 , yang pada dasarnya mengaktifkan flex-grow .

Hal yang aneh di sini adalah apa yang terjadi pada nilai-nilai yang Anda hilangkan . Anda akan mengharapkan mereka untuk tetap pada default mereka, tetapi mereka tidak. Namun, sebelum kita membahas apa yang terjadi, pertama-tama mari selami apa yang dilakukan flex-grow .

Seperti yang telah kita lihat, flex-shrink memungkinkan elemen menyusut jika ukuran dasarnya bertambah ke nilai yang dihitung yang lebih besar dari lebar wadah induk yang tersedia. flex-grow adalah kebalikannya. Jika total ukuran dasar elemen lebih kecil dari nilai lebar wadah induk, maka mereka akan tumbuh untuk mengisi ruang yang tersedia.

Jika kita mengambil contoh super dasar di mana kita memiliki tiga div kecil di samping satu sama lain dan menambahkan flex-grow: 1 , mereka tumbuh untuk mengisi ruang yang tersisa.

Tetapi jika kita memiliki tiga div dengan lebar yang tidak sama — seperti yang kita mulai dengan — menambahkan flex-grow ke mereka tidak akan melakukan apa-apa. Mereka tidak akan tumbuh karena mereka sudah mengambil semua ruang yang tersedia — begitu banyak ruang, pada kenyataannya, flex-shrink perlu menendang dan mengecilkannya agar pas!

Tetapi, seperti yang telah ditunjukkan orang kepada saya, menyetel flex: 1 dapat berfungsi untuk membuat kolom yang sama. Yah, semacam, seperti yang kita lihat di atas! Dalam situasi sederhana itu berhasil, seperti yang Anda lihat di bawah.

Ketika kami mendeklarasikan flex: 1 ini berfungsi karena, ini tidak hanya mengatur flex-grow menjadi 1 , tetapi juga mengubah flex-basis !

 .selector { flex: 1; /* flex-grow: 1; */ /* flex-shrink: 1; */ /* flex-basis: 0%; Wait what? */ }

Yup, setting flex: 1 set flex-basis ke 0% . Ini menimpa ukuran intrinsik yang kami miliki sebelumnya yang berperilaku seperti max-content . Semua item fleksibel kami sekarang ingin memiliki ukuran dasar 0 !

Melihat tampilan flex: 1 diperluas: 1 singkatan di DevTools menunjukkan kepada kita bahwa flex-basis telah berubah menjadi 0

Jadi ukuran dasarnya adalah 0 sekarang, tetapi karena flex-grow , mereka semua dapat tumbuh untuk mengisi ruang kosong. Dan sungguh, dalam hal ini, flex-shrink tidak lagi melakukan apa-apa, karena semua item fleksibel sekarang memiliki lebar 0 , dan terus bertambah untuk mengisi ruang yang tersedia.

DevTools FireFox menampilkan elemen dengan flex: 1 memiliki ukuran konten 0 dan terus bertambah untuk mengisi ruang yang tersedia.

Sama seperti contoh menyusut sebelumnya, kami mengambil ruang yang tersedia, dan membiarkan semua item fleksibel tumbuh pada tingkat yang sama. Karena semuanya memiliki lebar dasar 0 , tumbuh pada tingkat yang sama berarti ruang yang tersedia dibagi rata di antara mereka dan semuanya memiliki ukuran akhir yang sama!

Kecuali, seperti yang kita lihat, tidak selalu demikian…

Alasan untuk ini adalah karena, ketika flexbox melakukan semua hal ini dan mendistribusikan ruang, apakah itu mengecilkan atau memperbesar item fleksibel, ia melihat ukuran konten elemen. Jika Anda ingat kembali ke model kotak, kami memiliki ukuran konten itu sendiri, kemudian padding , border , dan margin luar itu.

Dan tidak, saya tidak lupa * { box-sizing: border-box; } .

Ini adalah salah satu kebiasaan aneh CSS tetapi masuk akal. Jika browser melihat lebar elemen-elemen itu dan memasukkan padding dan borders dalam perhitungan, bagaimana itu bisa mengecilkan semuanya? Entah padding juga harus menyusut atau benda-benda akan memenuhi ruang. Kedua situasi itu mengerikan , jadi alih-alih melihat box-size elemen saat menghitung ukuran dasarnya, itu hanya melihat kotak konten !

Jadi, menyetel flex: 1 menyebabkan masalah jika Anda memiliki border s atau padding pada beberapa elemen Anda. Saya sekarang memiliki tiga elemen yang memiliki ukuran konten 0 , tetapi elemen tengah saya memiliki bantalan di atasnya. Jika kami tidak memiliki padding itu, kami akan memiliki matematika yang sama seperti yang kami lakukan ketika kami melihat bagaimana flex-shrink bekerja.

Induk yaitu 600px dan tiga item fleksibel dengan lebar 0px . Mereka semua memiliki flex-grow: 1 sehingga mereka tumbuh pada tingkat yang sama, dan masing-masing memiliki lebar 200px Tapi padding mengacaukan semuanya . Sebagai gantinya, saya berakhir dengan tiga div dengan ukuran konten 0 , tetapi yang di tengah memiliki padding: 1rem . Itu berarti ia memiliki ukuran konten 0 , ditambah 32px juga.

Kami memiliki 600 - 32 = 568px untuk dibagi rata, bukan 600px . Semua div ingin tumbuh pada tingkat yang sama, jadi 568 / 3 = 189.3333px .

Dan itulah yang terjadi!

Tapi… ingat, itu ukuran kontennya, bukan lebar totalnya! Itu meninggalkan kita dengan dua div dengan lebar 189.333px , dan satu lagi dengan yang 189.333px + 32 = 221.333px . Itu perbedaan yang cukup substansial!

Metode 2: flex-basis: 100%

Saya selalu menangani ini seperti ini:

 .flex-parent { display: flex; } .flex-parent > * { flex-basis: 100%; }

Saya pikir ini bekerja untuk waktu yang lama. Sebenarnya, ini seharusnya menjadi solusi terakhir saya setelah menunjukkan bahwa flex: 1 tidak berfungsi. Tetapi ketika saya menulis artikel ini, saya menyadari bahwa itu juga jatuh ke dalam masalah yang sama, tetapi jauh lebih tidak jelas. Cukup sampai aku tidak menyadarinya dengan mataku.

Semua elemen berusaha menjadi 100% , artinya mereka semua ingin mencocokkan lebar induknya, yang, sekali lagi, 600px (dan dalam keadaan normal, seringkali jauh lebih besar, yang selanjutnya mengurangi perbedaan yang terlihat).

Masalahnya adalah 100% menyertakan padding dalam nilai yang dihitung (karena * { box-size: border-box; } , yang demi artikel ini, saya berasumsi semua orang menggunakan). Jadi, div luar berakhir dengan ukuran konten 600px , sedangkan div tengah berakhir dengan ukuran konten 600 - 32 = 568px .

Ketika browser sedang mencari cara untuk membagi ruang secara merata, itu tidak melihat bagaimana meratakan 1800px ke dalam 600px , melainkan melihat bagaimana menekan 1768px . Plus, seperti yang kita lihat sebelumnya, item fleksibel tidak menyusut dengan jumlah yang sama, tetapi dengan kecepatan yang sama! Jadi, elemen dengan bantalan menyusut sedikit lebih sedikit daripada yang lain.

Ini menghasilkan .card memiliki lebar akhir 214.483px sementara yang lain masuk pada 192.75px . Sekali lagi, ini mengarah ke nilai lebar yang tidak sama, meskipun perbedaannya lebih kecil daripada yang kita lihat dengan solusi flex: 1 .

Mengapa CSS Grid adalah pilihan yang lebih baik di sini

Meskipun semua ini sedikit membuat frustrasi (dan bahkan sedikit membingungkan), semuanya terjadi karena alasan yang bagus. Jika margin, padding, atau batas berubah ukuran saat flex terlibat, itu akan menjadi mimpi buruk.

Dan mungkin ini berarti bahwa CSS Grid mungkin merupakan solusi yang lebih baik untuk pola desain yang sangat umum ini.

Saya sudah lama berpikir bahwa flexbox lebih mudah untuk diambil dan mulai digunakan daripada grid, tetapi grid memberi Anda lebih banyak kontrol tertinggi dalam jangka panjang, tetapi itu jauh lebih sulit untuk diketahui. Saya telah berubah pikiran tentang itu baru-baru ini, dan saya pikir grid tidak hanya memberi kita kontrol yang lebih baik dalam situasi seperti ini, tetapi sebenarnya juga lebih intuitif .

Biasanya, ketika kita menggunakan grid, kita secara eksplisit mendeklarasikan kolom kita menggunakan grid-template-columns . Padahal kita tidak harus melakukan itu. Kita dapat membuatnya berperilaku seperti flexbox dengan menggunakan grid-auto-flow: column .

 .grid-container { display: grid; grid-auto-flow: column; }

Sama seperti itu, kita berakhir dengan jenis perilaku yang sama seperti melempar display: flex di sana. Seperti flex , kolom berpotensi menjadi tidak seimbang, tetapi keuntungan dengan grid adalah induknya memiliki kendali penuh atas semuanya . Jadi, alih-alih konten item memiliki dampak seperti di flexbox, kami hanya membutuhkan satu baris kode lagi dan kami dapat menyelesaikan masalah:

 .grid-container { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }

Saya suka bahwa ini semua ada di pemilih induk, dan kita tidak harus memilih anak-anak untuk membantu mendapatkan tata letak yang kita cari!

Yang menarik di sini adalah cara kerja unit fr Mereka secara harfiah disebut " unit fleksibel " dalam spesifikasi, dan mereka bekerja seperti halnya flexbox dalam membagi ruang;. Perbedaan besar: mereka melihat trek lain untuk menentukan berapa banyak ruang yang mereka miliki , tanpa memperhatikan konten di dalam trek tersebut.

Itulah keajaiban nyata di sini. Dengan mendeklarasikan grid-auto-columns: 1fr , kami pada dasarnya mengatakan, "secara default, semua kolom saya harus memiliki lebar yang sama," itulah yang kami cari sejak awal!

Tapi bagaimana di layar kecil?

Yang saya suka dengan pendekatan ini adalah kita bisa membuatnya tetap sederhana:

 .grid-container { display: grid; gap: 1em; } @media (min-width: 35em) { grid-auto-flow: column; grid-auto-columns: 1fr; }

Dan seperti itu, ia bekerja dengan sempurna. Dan dengan mendeklarasikan display: grid dari awal, kita dapat memasukkan gap untuk menjaga jarak yang sama, apakah anak-anak adalah baris atau kolom.

Saya juga menemukan ini jauh lebih intuitif daripada mengubah arah flex-direction dalam kueri media untuk mendapatkan hasil yang serupa. Sama seperti saya menyukai flexbox (dan saya benar-benar masih berpikir ini memiliki kasus penggunaan yang hebat), fakta bahwa mendeklarasikan flex-direction: column membuat baris, dan sebaliknya, sedikit kontra-intuitif pada pandangan pertama.

Dan tentu saja, jika Anda lebih suka menggulir tanpa kueri media, tidak ada yang menghentikan Anda untuk membawa ini ke tingkat berikutnya dengan bantuan auto-fit , yang akan mirip dengan menyiapkan sesuatu dengan flex-wrap (meskipun tidak persis sama ):

 .grid-container { display: grid; gap: 1em; grid-template-columns: repeat(auto-fit, minmax(10em, 25em)); }

Membuatnya bekerja dengan flexbox

Saya menyadari bahwa kita dapat menyiasatinya dengan flexbox dengan menyarangkan elemen dengan padding di atasnya. Kami telah melakukan ini sejak kami mulai membuat tata letak menggunakan float, dan Bootstrap benar-benar membuat pola desain seperti ini.

 <div class="container"> <div class="row"> <div class="col"> <div class="">... </div> <div class="col"> <div class="element-with-padding">...</div> </div> <div class="col"> ... </div> </div> </div>

Dan tidak ada yang salah dengan itu. Berhasil! Tetapi pelampung juga berfungsi, dan kami telah berhenti menggunakannya untuk tata letak karena solusi yang lebih baik telah dirilis dalam beberapa tahun terakhir.

Salah satu alasan saya menyukai grid adalah karena kita dapat menyederhanakan markup kita sedikit. Sama seperti kami membuang float untuk solusi yang lebih baik, saya setidaknya ingin orang-orang tetap berpikiran terbuka bahwa mungkin, mungkin saja, grid bisa menjadi solusi yang lebih baik, dan lebih intuitif untuk jenis pola desain ini.

Flexbox masih memiliki tempatnya, tentu saja

Saya masih menyukai flexbox, tetapi saya pikir kekuatan sebenarnya berasal dari saat kami ingin mengandalkan lebar intrinsik item flex , seperti dengan navigasi, atau grup elemen, seperti tombol atau item lain dengan lebar bervariasi yang Anda inginkan untuk pergi di samping satu sama lain.

Dalam situasi itu, perilaku itu adalah aset yang membuat hal-hal seperti jarak antar item yang tidak setara menjadi sangat mudah! Flexbox luar biasa, dan saya tidak punya rencana untuk berhenti menggunakannya.

Namun, dalam situasi lain, ketika Anda menemukan diri Anda berjuang dengan bagaimana flexbox mencoba bekerja, mungkin Anda bisa beralih ke grid, bahkan jika itu bukan grid "2d" biasa di mana Anda diberitahu bahwa Anda harus menggunakannya.

Orang sering mengatakan kepada saya bahwa mereka berjuang untuk mencari tahu grid karena terlalu rumit, dan meskipun bisa , seperti yang kita lihat di sini, tidak harus begitu.


Pos Equal Columns With Flexbox: Ini Lebih Rumit Daripada yang Mungkin Anda Pikirkan muncul pertama kali di CSS-Tricks .

Anda dapat mendukung Trik-CSS dengan menjadi Pendukung MVP .

June 10, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *