Clever Geek Handbook

Memeriksa properti CSS flex

Pernah bertanya-tanya tentang cara kerja properti singkatan CSS flex? Ini memungkinkan Anda untuk mengatur nilai properti flex-grow, flex-shrinkdan flex-basis. Saya perhatikan bahwa properti ini paling sering digunakan dalam tampilan flex: 1, yang memungkinkan item fleksibel meregang untuk mengambil ruang yang tersedia. Pada artikel ini, saya ingin berbicara tentang properti steno dan properti yang disetel menggunakannya. Saya akan berbicara tentang kapan dan mengapa Anda dapat menggunakan properti ini, saya akan memberikan contoh praktis.







flex



Properti bertumbuh fleksibel



Properti CSS flex-growdigunakan untuk menyesuaikan apa yang disebut faktor pertumbuhan fleksibel, yang memungkinkan elemen tersebut meregang untuk mengisi ruang yang tersedia. Hanya bilangan bulat yang dapat digunakan sebagai nilai untuk properti ini. Mari kita lihat contohnya.



Berikut markup HTML-nya: 



<div class="wrapper">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>


Berikut gayanya: 



.wrapper {
    display: flex;
    flex-wrap: wrap;
}

.item {
    flex-grow: 1;
}


Properti flex-growdapat memengaruhi lebar atau tinggi elemen, bergantung pada nilai properti flex-direction. Saat mempertimbangkan contoh berikut, perlu diingat bahwa properti yang mereka gunakan flex-directiondisetel ke nilai default ( row). Jika bukan ini masalahnya, saya akan memberi tahu Anda tentang itu.



Perhatikan bahwa tanpa digunakan flex-grow, item flex akan disetel ke lebar defaultnya, yang sama dengan lebar aslinya. Dan jika digunakan flex-grow: 1, maka ruang kosong yang tersedia didistribusikan di antara elemen-elemen tersebut.





Di atas, properti flex-grow tidak berlaku. Di bawah ini adalah flex-grow: 1 Anda



mungkin bertanya-tanya bagaimana sebenarnya ruang kosong dialokasikan di antara item-item flex. Ini pertanyaan yang bagus. Saya akan segera menjawabnya.



Ilustrasi berikut memperlihatkan bagaimana elemen terlihat tanpa menggunakan propertiflex-grow. Dengan kata lain, item yang ditampilkan di sini dalam ukuran normalnya.





Properti flex-grow tidak digunakan



Untuk memahami bagaimana lebar item flex dihitung, lihat rumus di bawah ini. Saya menemukan formula ini dalam materi Samantha Ming (yang karenanya saya berterima kasih padanya!).



Mari kita hitung lebar elemen pertama - elemen yang berisi teksCSS.





Menemukan Lebar Elemen



Jadi, rumus berikut digunakan di sini: 



  = ((flex-grow  /   flex-grow) *  ) +


Mari kita analisis rumus ini:



  • flex-grow Apakah faktor pertumbuhan ditentukan untuk item tersebut.
  • flex-grow Merupakan penjumlahan nilai faktor pertumbuhan dari semua elemen.
  • - ini adalah ruang kosong wadah, yang ada di dalamnya sebelum mekanisme digunakan flex-grow.
  • - ini adalah, seperti yang Anda duga, lebar elemen sebelum mengubahnya flex-grow.


Substitusi nilai riil ke dalam rumus ini menghasilkan sebagai berikut: 



  = ( (1 / 3) * 498) + 77 = 241


Nilai flex-grow yang berbeda untuk item yang berbeda



Pada contoh sebelumnya, nilai yang sama digunakan untuk semua item flex flex-grow. Sekarang mari kita coba untuk menetapkan properti ke elemen pertama flex-grow: 2. Bagaimana lebar elemen dihitung sekarang? Saat mempertimbangkan rumus berikut, perlu diingat bahwa lebar ruang kosong dalam contoh kita adalah 498px.





Menemukan Lebar Elemen dalam Situasi Saat Elemen Berbeda Memiliki Pertumbuhan Lentur yang Berbeda



Seperti yang Anda lihat, metode ini menggunakan mekanisme yang sama untuk menghitung lebar elemen yang telah dibahas di atas. Perbedaan utamanya adalah bahwa nilaiflex-growelemen pertama ditetapkan sebagai2, yang tercermin dalam rumus untuk menghitung lebar elemen.



Bisakah 0 digunakan sebagai nilai pertumbuhan fleksibel?



Tentu saja Anda bisa! Karena properti flex-growmenerima nilai integer, dan dapat dituliskan padanya 0. Ini berarti bahwa kami tidak ingin item flex diubah ukurannya untuk mengambil sebagian dari ruang kosong container.





Konsekuensi Menetapkan Properti Flex-Grow ke 0



Seperti yang Anda lihat, elemen yang ditetapkan untuk propertiflex-grow: 0tidak mengubah lebar. Teknik ini bisa berguna saat Anda ingin item fleksibel mempertahankan lebar aslinya.



Flex-grow tidak membuat item menjadi sama



Ada kesalahpahaman umum bahwa penggunaan flex-growmemungkinkan elemen yang cocok memiliki lebar yang sama. Ini salah. Tujuan penggunaannya flex-growadalah untuk mendistribusikan ruang yang tersedia di antara elemen. Seperti yang Anda lihat dengan menganalisis rumus di atas, lebar akhir item fleksibel dihitung berdasarkan lebar aslinya (yaitu, yang mereka miliki sebelum diterapkan flex-grow).



Jika Anda perlu membuat semua elemen dari himpunan memiliki lebar yang sama, ketahuilah bahwa Anda dapat melakukannya menggunakan properti flex-basis. Kami akan membicarakannya di bawah ini.



Properti flex-shrink



Properti flex-shrinkmemungkinkan Anda menyetel apa yang disebut faktor penyusutan fleksibel. Jika semua item flex lebih besar dari ukuran containernya, item tersebut akan diperkecil sesuai dengan nilai propertinya flex-shrink.





Properti flex-shrink ditetapkan ke item tengah: 1



Berikut adalah gaya untuk contoh ini: 



.item-2 {
    width: 300px;
    flex-shrink: 1;
}


Browser akan membuat lebar elemen menjadi item-2sama 300pxketika kondisi berikut terpenuhi:



  • Lebar total semua elemen kurang dari lebar wadah.
  • Lebar area pandang halaman sama dengan atau lebih besar dari lebar elemen.


Beginilah perilaku elemen dari contoh sebelumnya saat ditampilkan dalam viewport dengan lebar berbeda.





Lebar elemen dengan teks Is



tidak menyusut selama ada cukup ruang di layar untuk menampilkannya. Seperti yang Anda lihat, elemen tidak menyusut, mempertahankan lebarnya300pxselama ada cukup ruang untuk itu.



Properti berbasis fleksibel



Properti flex-basismenetapkan ukuran dasar item fleksibel, yang dimilikinya sebelum ruang kosong dialokasikan sesuai dengan faktor fleksibilitas yang ditetapkan oleh properti flex-growdan flex-shrink. Secara default, untuk semua nilai kecuali autodan content, nilainya flex-basissama dengan lebar elemen, dan saat menggunakan properti flex-direction: column, tingginya.



Properti flex-basismengambil nilai yang sama dengan yang dapat diambil oleh properti widthdan height. Nilai default adalah nilai autoyang ditetapkan berdasarkan nilainya content. Nilai contentditetapkan secara otomatis berdasarkan ukuran konten item fleksibel.



Mari terapkan item-1gaya berikut ke elemen dari contoh kita: 



.item-1 {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 50%;
}




Penggunaan properti berbasis fleksibel: 50%



Di sini, item pertama diberikan propertiflex-basis: 50%. Dalam kasus ini, penting untuk menyetel ulang ke0propertiflex-grow, yang akan memungkinkan Anda memastikan bahwa ukuran elemen tidak melebihi50%.



Apa yang terjadi jika Anda menulisflex-basisnilaike properti100%? Ini akan menyebabkan elemen menempati 100% lebar elemen induk, dan elemen lainnya tergabung ke baris baru.



Berikut adalah gaya yang relevan: 



.item-1 {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 100%;
}




Hasil penggunaan properti flex-basis adalah 100%;



Properti steno flex



Properti flexmemungkinkan, dalam format singkatan, untuk menyetel nilai properti flex-grow, flex-shrinkdan flex-basis. Default yang diambil properti ini adalah auto. Itu cocok flex: 0 1 auto. Ini berarti memungkinkan item fleksibel bertambah besar berdasarkan ukuran kontennya.



Dalam konteks ini, saya ingin menarik perhatian Anda pada satu detail penting. Kita berbicara tentang item fleksibel dengan ukuran absolut dan relatif. Dan omong-omong, ini tidak ada hubungannya dengan posisi CSS . Ini berlaku untuk model flexbox.



Item fleksibel dengan ukuran relatif



Inilah CSS: 



.item {
    /* ,   ,  flex: 1 1 auto */
    flex: auto;
}


Di sini, item fleksibel diukur berdasarkan kontennya. Hasilnya, item dengan lebih banyak konten akan tampak lebih besar.





Elemen dengan lebih banyak konten akan memiliki lebih banyak



Item fleksibel dengan dimensi absolut



Jika, tidak seperti contoh sebelumnya, properti flex-basisdisetel ke nilai 0, ini akan menyebabkan semua item fleksibel bertambah ke ukuran yang sama.



Berikut gayanya: 



.item {
    /*  flex: 1 1 0% */
    flex: 1;
}




Item berukuran sama



Fitur properti Flex yang saya suka



Nama properti itu sendiri flexmengisyaratkan bahwa ia dapat bekerja secara fleksibel dengan nilai-nilai yang diteruskan kepadanya. Ini memberikan beberapa fitur yang tampak menarik bagi saya. Mari kita lihat beberapa contoh.



▍Satu nilai tanpa unit



Inilah CSS: 



.item {
    flex: 1;
}


Di sini, flexsatu nilai tanpa unit ditulis ke properti . Nilai ini akan diinterpretasikan oleh sistem sebagai nilai properti flex-grow. Persamaannya akan terlihat seperti flex: 1 1 0.



▍Dua nilai tanpa unit



Mari kita lihat gaya berikut: 



.item {
    flex: 1 1;
}


Di sini kami secara eksplisit mengatur nilai flex-growdan masing - masing flex-shrink. Ini flex-basisakan mengatur ulang ke default.



▍Nilai tunggal yang mewakili ukuran tertentu



Mari kita bahas tentang bagaimana gaya berikut akan "didekodekan": 



.item {
    flex: 100px;
    /* flex: 1 1 100px */
}


Nilai 100pxtersebut akan diperlakukan oleh sistem sebagai nilai flex-basis. Dan dalam flex-growdan flex-shrinkakan, secara default, ditulis 1.



▍Menggunakan 0 tanpa menentukan unit



Misalkan Anda ingin menetapkan flex-basisnilai 0menggunakan properti flex. Untuk mengatasi masalah ini, kami akan memutuskan untuk melakukan ini: 



.item {
    flex: 0;
}


Tidak disarankan untuk melakukannya, karena dapat membingungkan orang yang akan membaca kode tersebut dan browser. Bagaimana memahami - apa sebenarnya yang dimaksud dengan ini 0? Ke properti flex-grow, flex-shrinkatau flex-basis? Secara umum, kebingungan itu ternyata. Inilah yang dikatakan spesifikasi CSS tentangnya :



Nol tanpa unit pengukuran, tanpa dua nilai kerampingan sebelumnya, harus ditafsirkan sebagai nilai kerampingan. Untuk menghindari salah tafsir atau deklarasi properti yang menyesatkan, penulis harus menggunakan unit saat menentukan basis-fleksibel ke nol, atau mendahului nilai ini dengan dua nilai basis-fleksibel.



Artinya, untuk menghindari ambiguitas, kode di atas harus ditulis ulang sebagai berikut: 



.item {
    flex: 0%;
    /* flex: 1 1 0% */
}


Konstruksi digunakan di sini 0%, tetapi Anda dapat, misalnya, menggunakan konstruksi 0px.



Gunakan properti steno flex



Saat Anda perlu menyetel properti flex-grow, flex-shrinkdan flex-basis, yang terbaik adalah menggunakan properti singkatan untuk itu flex.



Melihat spesifikasi CSS :



Penulis didorong untuk mengelola item fleksibel menggunakan properti singkatan singkat daripada menggunakan nama properti yang memenuhi syarat secara langsung, karena menerapkan properti singkatan dengan benar akan menyetel ulang nilai yang tidak ditentukan ke keadaan yang sesuai dengan penggunaan umum.



Kasus penggunaan dan contoh praktis



▍ Avatar pengguna





Avatar yang dikonfigurasi dengan properti flex



Model flexbox sering digunakan untuk mengatur gaya komponen halaman yang relevan dengan pengguna. Misalnya, ini menyangkut avatar pengguna dan tanda tangan terkait, yang harus berada di baris yang sama.



Inilah markupnya: 



<div class="user">
    <img class="user__avatar" src="shadeed.jpg" alt="" />
    <div>
        <h3>Ahmad Shadeed</h3>
        <p>Author of Debugging CSS</p>
    </div>
</div>


Berikut gayanya: 



.user {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.user__avatar {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
}


Perhatikan bahwa ketika saya menyiapkan elemen user__avatar, saya menerapkan properti flex: 0 0 70px. Ini penting, karena tanpa pengaturan ini, gambar mungkin tidak ditampilkan dengan benar di beberapa browser lama. Selain itu, prioritas properti flexlebih tinggi daripada prioritas properti width(dalam situasi di mana itu diterapkan flex-direction: row) dan properti height(dalam situasi ketika diterapkan flex-direction: column).



Jika Anda mengubah ukuran avatar, yang hanya memengaruhi properti flex, browser akan mengabaikan pengaturan di properti width. Inilah gaya yang relevan: 



.user__avatar {
    /*   100px,   70px */
    flex: 0 0 100px;
    width: 70px;
    height: 70px;
}


▍Judul Elemen





Judul Elemen



Misalkan kita perlu memberi style pada judul elemen. Judul ini harus menggunakan semua ruang yang tersedia untuk itu. Anda dapat mengatasi masalah ini menggunakan propertiflex: 1: 



.page-header {
    display: flex;
    flex-wrap: wrap;
}

.page-header__title {
    flex: 1;
}


▍Bidang masukan untuk menyiapkan pesan









Field Input Box seperti ini sering ditemukan pada aplikasi messaging seperti yang terdapat di Facebook dan Twitter. Bidang seperti itu harus menempati semua ruang yang tersedia untuk itu. Dalam hal ini, tombol untuk mengirim pesan harus memiliki lebar tetap. Ini adalah tampilannya di CSS: 



form {
    display: flex;
    flex-wrap: wrap;
}

input {
    flex: 1;
    /*   */
}


Contoh ini adalah demonstrasi yang baik tentang penggunaan properti flex-grow.



Perlu dicatat bahwa beberapa metode penggunaan properti flextidak mendapat perhatian yang cukup dalam publikasi yang ditujukan untuk properti ini. Mari perbaiki ini.



▍ Sejajarkan elemen bawah yang ada di kartu yang berbeda





Tujuannya adalah untuk menyelaraskan kedua tanggal dengan garis merah



Katakanlah kita memiliki layout Grid CSS dengan dua kolom. Masalahnya di sini adalah bahwa tanggal yang ditampilkan di akhir konten teks kartu tidak sejajar. Dan kami membutuhkan mereka untuk berada di baris yang sama seperti yang ditunjukkan pada gambar sebelumnya.



Model flexbox dapat digunakan untuk mengatasi masalah ini.



Inilah markupnya: 



<div class="card">
    <img src="thumb.jpg" alt="">
    <h3 class="card__title">Title short</h3>
    <time class="card__date"></time>
</div>


Anda dapat mencapai tujuan kami dengan menggunakan properti flex-direction: column. Sebuah elemen card__title, sebuah heading, dapat diberi gaya dengan menerapkan sebuah properti flex-growdan membuatnya mengambil semua ruang yang tersedia untuk itu. Hasilnya, ternyata garis tanggal akan muncul di bagian bawah kartu. Ini akan terjadi meskipun judulnya sendiri cukup pendek.



Berikut gayanya: 



.card {
    display: flex;
    flex-direction: column;
}

/*   */
.card__title {
    flex-grow: 1;
}


Masalah ini dapat diatasi tanpa harus menggunakan properti flex-grow. Yakni, kita berbicara tentang menggunakan model flexbox dan mekanisme untuk mengatur margin secara otomatis menggunakan kata kunci auto. Ngomong-ngomong, saya menulis artikel mendetail tentang ini . 



/*   */
.card__date {
    margin-top: auto;
}


Menggunakan nilai yang berbeda untuk faktor kelangsingan



Di bagian ini, saya ingin berbicara tentang menggunakan properti flex-growdan flex-shrinkyang diberi nilai selain 1. Sekarang saya akan memberikan beberapa contoh praktis menggunakan skema serupa untuk mengatur properti ini.



▍Panel kontrol





Seperangkat kontrol



Untuk contoh ini, saya terinspirasi oleh desain Facebook (saya juga mengambil ikon dari sana). Panel kontrol (itemactionsdalam kode berikut) memiliki empat item. (Elemenactions__item.user) terakhir memiliki lebar yang lebih kecil dari lebar elemen lainnya. Anda dapat membuat panel kontrol seperti ini: 



.actions {
    display: flex;
    flex-wrap: wrap;
}

.actions__item {
    flex: 2;
}

.actions__item.user {
    flex: 1;
}


▍Animasi saat elemen direntangkan





Elemen membentang saat Anda mengarahkan kursor ke atasnya.



Item fleksibel dapat beranimasi saat Anda mengarahkan kursor ke elemen tersebut . Teknik ini bisa sangat berguna. Inilah CSS yang relevan: 



.palette {
    display: flex;
    flex-wrap: wrap;
}

.palette__item {
    flex: 1;
    transition: flex 0.3s ease-out;
}

.palette__item:hover {
    flex: 4;
}


Di sini Anda dapat menemukan video yang mendemonstrasikan semuanya dalam aksi.



▍Meningkatkan ukuran kartu yang aktif



Saya sangat menyukai proyek ini di CodePen, yang menerapkan mekanisme untuk meningkatkan ukuran kartu dengan deskripsi rencana tarif, yang diklik pengguna. Kartu diubah ukurannya dengan menyetel propertinya flex-growke nilai 4.





Tingkatkan ukuran kartu aktif



▍Bagaimana jika isi wadah lebih besar dari wadah itu sendiri?





Item tidak sesuai dengan wadah



Beberapa waktu yang lalu saya menerima email dari salah satu pembaca saya yang memberi tahu saya tentang masalah yang dia alami dan meminta bantuan untuk solusinya. Inti dari masalah ini disajikan pada gambar sebelumnya. Ada beberapa gambar di sini yang seharusnya berada di dalam elemen penampung, tetapi gambar ini lebih besar dari penampung.



Ayo coba gaya ini: 



.wrapper {
    display: flex;
}

.wrapper img {
    flex: 1;
}


Tetapi bahkan saat menggunakan properti, flex: 1gambar tidak ditempatkan di wadah. Mengacu pada spesifikasi CSS :



Item fleksibel, secara default, tidak menyusut hingga kurang dari ukuran kontennya (panjang kata terpanjang atau elemen berukuran tetap). Untuk mengubahnya, Anda perlu menggunakan properti min-width atau min-height.



Dalam kasus kami, masalahnya adalah gambar terlalu besar untuk model flexbox untuk diubah ukurannya agar sesuai dengan penampung. Anda bisa memperbaikinya seperti ini: 



.wrapper img {
    flex: 1;
    min-width: 0;
}


Lihat ini artikel saya untuk rincian.



Hasil



Di sini saya memberi tahu Anda tentang properti flexdan cara menggunakannya. Saya harap Anda mempelajari sesuatu yang baru dan bermanfaat dari materi ini.



Apakah Anda menggunakan properti flex CSS dalam proyek Anda?





More articles:


All Articles