Apakah kita memerlukan deteksi bungkus fleksibel CSS?

Ketika saya menulis CSS, saya berharap ada cara untuk memilikinya flex-wrap deteksi di CSS. Dalam beberapa kasus, saya mendesain komponen sederhana yang responsif flex-wraptetapi intinya adalah saya ingin memiliki lebih banyak kendali dan dapat mendeteksi kapan suatu barang dibungkus. Posting ini membahas lebih detail tentang salah satu keinginan saya untuk CSS di tahun 2023.

Dalam posting ini, saya akan mencoba menjelaskan mengapa kita membutuhkannya dan kasus penggunaan apa yang bisa mendapat manfaat dari itu.

Pembungkus fleksibel

Untuk membawa Anda ke dalam konteks, flex-wrap adalah cara agar kita dapat memutuskan apakah item fleksibel harus dibungkus menjadi baris baru atau tidak. Mengizinkan item fleksibel untuk dibungkus dapat menghasilkan komponen yang bekerja secara responsif terlepas dari lebar wadahnya.

.list 
  display: flex;
  flex-wrap: wrap;

Sesederhana itu.

Contoh deteksi pembungkus fleksibel

Saya cenderung menghindari penggunaan flex-wrap saat membuat tajuk situs. Saya lebih suka menggunakan kueri media dan memperkirakan breakpoint teraman untuk menyembunyikan navigasi dan menampilkan sakelar menu seluler.

Perhatikan contoh berikut.

.site-header 
  display: flex;
  align-items: center;


@media (max-width: 600px) 
  .site-header 
    /* Hide the navigation, and show the mobile menu toggle. */	
  

Untuk membuat tajuk situs responsif, saya menambahkan kueri media di status kedua. Alasannya saya berasumsi bahwa navigasi mungkin mendapatkan item tambahan dan masih ada cukup ruang untuk itu.

Jika saya melakukan hal seluler di status ketiga, desain mungkin gagal saat navigasi memiliki lebih banyak item.

Jika saya punya flex-wrap deteksi negara, ini akan membuat pekerjaan saya jauh lebih mudah. Saya bisa membayangkan sesuatu seperti ini:

.site-header 
  display: flex;
  flex-wrap: wrap;
  align-items: center;


.site-header:has(.nav:wrap) 
  /* Hide the navigation, and show the mobile menu toggle. */	

saya menggunakan :has karena saya perlu tahu jika barang anak dibungkus (Tautan navigasi, dalam kasus kami).

Anda mungkin bertanya-tanya apakah media query dan flex-wrap deteksi memberi kita hasil yang sama. Benar, tetapi tidak selalu demikian.

Saya dapat merusak navigasi berbasis kueri media hanya dengan menambahkan teks panjang.

Pertimbangkan gambar berikut:

Kueri media tidak akan tahu bahwa kita memiliki lebih banyak item navigasi, sehingga perlu memulai. Ini berfungsi berdasarkan lebar viewport, bukan konten kita.

Saat mengerjakan situs web multibahasa, item navigasi yang sama untuk bahasa Inggris mungkin terlihat berbeda panjangnya dibandingkan dengan bahasa Arab, misalnya.

Perhatikan contoh berikut.

Saat ukuran area pandang semakin kecil, kueri media mungkin muncul terlalu dini. Ini tidak terjadi sepanjang waktu, tetapi mungkin saja. Apa yang dapat saya lakukan dalam kasus seperti itu adalah memiliki kueri media baru, hanya untuk tata letak RTL.

@media (max-width: 700px) 
  html[dir="rtl"] 
    .site-header 
      /* Custom CSS... */
    
  

Dengan flex-wrap deteksi, navigasi akan berfungsi terlepas dari panjang konten.

.site-header:has(.nav:wrap) 
  /* Hide the navigation, and show the mobile menu toggle. */	

Tab

Kita dapat menggunakan flexbox untuk membuat komponen tab. Di seluler, saya ingin desain beralih ke daftar, bukan tab. Triknya adalah mengetahui kapan item tab dibungkus.

Ini tidak mungkin di CSS saat ini (kecuali dengan retasan yang saya tidak suka gunakan). Kami dapat menggunakan kueri media untuk melakukan itu, tetapi itu tidak sempurna.

@media (min-width: 600px) 
  .tabs 
    display: flex;
    flex-wrap: wrap;
  

Sekali lagi, kueri media di atas tidak tahu apa-apa tentang kontennya. Itu hanya perkiraan dari front-end developer.

Seperti yang Anda lihat, ini bisa gagal saat kita memiliki lebih banyak tab. Jika kami dapat mendeteksi kapan item fleksibel pertama dibungkus, kami dapat memperbaikinya dengan cara yang jauh lebih jelas.

.tabs 
  display: flex;
  flex-wrap: wrap;


.tabs:wrap 
  flex-direction: column;
  border-bottom: 0;	


.tabs:wrap .tab__item 
  flex: 1;

Margin otomatis dan pembungkus fleksibel

Margin otomatis dan kotak fleksibel berguna. Kita bisa menggunakannya untuk mendorong item fleksibel ke ujung wadahnya.

.card 
  display: flex;
  flex-wrap: wrap;


.actions 
  margin-left: auto;

Tantangannya di sini adalah kartu tersebut mungkin terlihat aneh saat dibungkus. Kita tidak tahu kapan itu akan terjadi.

Jika kita punya flex-wrap deteksi, pekerjaan akan jauh lebih mudah.

.card 
  display: flex;
  flex-wrap: wrap;


.card:wrap .actions 
  margin-left: initial;


.card:wrap .actions__item 
  /* show the label */

Kesimpulan

Jadi, apakah kita memerlukan deteksi pembungkusan fleksibel? Ini ya besar bagi saya. Di atas adalah beberapa contoh di mana deteksi pembungkusan fleksibel dapat membantu. Saya yakin memiliki fitur ini adalah hal yang paling dekat dengan kueri konten di CSS.

Bagaimana denganmu? Menurut Anda, apakah fitur ini harus diterapkan di CSS?