Pada panduan ini, Anda akan belajar cara menggunakan properti Flexbox align-items dan align-self dalam CSS untuk mengontrol penataan elemen-elemen individual di dalam sebuah kontainer Flex. Sementara align-items menentukan penataan dari semua anak langsung suatu kontainer, align-self memungkinkan penyesuaian individual untuk setiap elemen anak secara berbeda. Kami akan menjelaskan konsep-konsep ini secara bertahap agar Anda dapat memahami dengan tepat bagaimana menggunakan properti-properti ini secara efektif.
Poin Penting
- align-items mendefinisikan penataan dari semua anak dalam suatu Kontainer Flex.
- align-self memungkinkan penataan individual dari elemen-elemen Flex tunggal di dalam kontainer.
- Stretch adalah nilai default untuk align-items dan memastikan bahwa anak-anak mengisi ruang yang tersedia.
Panduan Langkah-demi-Langkah
Pertama, kita akan melihat bagaimana konfigurasi dasar dari Kontainer Flex terlihat dan bagaimana kita dapat memengaruhi penataan anak-anak melalui align-items.
Di sini, Anda mendefinisikan sebuah kontainer dengan display: flex;. Di dalam kontainer ini, Anda dapat menyesuaikan penataan melalui align-items, misalnya menjadi stretch, yang berarti anak-anak akan meregangkan tinggi atau lebar seluruh kontainer.
Anda dapat menggunakan berbagai nilai untuk align-items, termasuk flex-start, center, dan flex-end. Jika Anda mengatur align-items menjadi stretch, Anda akan melihat bahwa semua elemen anak mengisi seluruh ruang kontainer. Untuk memperlihatkan ini, kita akan menghapus lebar tetap dari elemen anak, sehingga mereka mengisi seluruh ruang.
Selanjutnya, jika Anda atur align-items menjadi center, tiba-tiba Anda akan melihat bahwa elemen tidak lagi mengisi seluruh ruang, melainkan hanya mempertahankan lebar minimal yang diperlukan. Ini menunjukkan betapa pentingnya nilai yang tepat untuk align-items dalam mencapai layout yang diinginkan.
Jika Anda kembali menambahkan lebar tetap, misalnya 200px, Anda akan melihat bahwa elemen menjadi lebih lebar dan tata letak tetap stabil. Anda juga dapat menggunakan width: 100% untuk efek serupa.
Sekarang kita menuju inti panduan kita: penggunaan align-self. Properti CSS ini memungkinkan Anda untuk menyesuaikan penataan individu dari setiap elemen anak, independen dari pengaturan kontainer induk. Oleh karena itu, kita atur align-items menjadi center dan kemudian tambahkan pengaturan khusus untuk align-self.
Untuk elemen navigasi, Anda ingin agar posisinya berada di sebelah kiri. Atur align-self: flex-start untuk navigasi dan simpan perubahan Anda. Anda seharusnya dapat melihat elemen navigasi bergerak ke sebelah kiri.
Untuk elemen utama (main), kita atur align-self: center. Elemen ini seharusnya tetap berada di tengah dan jaraknya dari elemen lain akan terlihat.
Kemudian, kita menetapkan area footer dengan align-self: flex-end ke bawah. Dengan demikian, semua pengaturan akan menghasilkan garis diagonal dari kiri atas ke kanan bawah dalam tata letak Anda.
Jika Anda mengatur align-self untuk elemen utama ke stretch, ini berarti bahwa elemen akan mengisi seluruh ruang di sumbu horizontal, menyebabkan elemen lain mengcollapse pada tinggi mereka.
Serupa, Anda juga dapat mengubah arah dengan mengatur flex-direction: row untuk kontainer Anda. Langkah-langkah penataan elemen individual tetap sama, hanya sumbu yang berubah. Di atas, kami mulai dengan flex-start dan membiarkan elemen mengikuti prinsip stretch sesuai.
Poin penting adalah Anda dapat menggunakan align-self sesering yang diperlukan untuk memberikan penataan individual kepada setiap elemen, memberi Anda kendali penuh atas tata letak kontainer dan anak-anaknya.
Dengan menerapkan properti Flexbox secara terarah, Anda dapat membuat tata letak yang menarik secara visual, yang juga dioptimalkan untuk berbagai ukuran layar.
Ringkasan
Dalam panduan ini, kami telah membahas secara mendalam properti Flexbox align-items dan align-self. Anda telah belajar cara menata elemen dalam sebuah kontainer Flex, baik secara keseluruhan melalui kontainer maupun secara individu untuk setiap elemen.
Pertanyaan Umum
Apa saja nilai yang bisa saya gunakan untuk align-items?Anda dapat menggunakan nilai seperti flex-start, center, flex-end, dan stretch.
Bagaimana cara kerja align-self?align-self memungkinkan Anda untuk mengatur penataan sebuah elemen tunggal di dalam kontainer Flex, independen dari penataan kontainer keseluruhan.
Bisakah saya menerapkan align-self untuk beberapa elemen sekaligus?Iya, Anda dapat mengatur align-self untuk setiap elemen secara individual.
Bagaimana stretch mempengaruhi ukuran elemen?Nilai stretch memastikan bahwa elemen mengisi seluruh ruang yang tersedia di sumbu horizontal atau vertikal.
