Flexbox dalam CSS & HTML: Panduan untuk penataan dalam sumbu utama

Dalam panduan ini, Anda akan belajar cara menata elemen dalam sebuah Flex-Container sepanjang sumbu utama menggunakan Flexbox. Kami sudah membahas penataan sepanjang sumbu lintang, tetapi sumbu utama juga sama pentingnya. Teknologi Flexbox memberikan berbagai cara untuk menata elemen Anda secara fleksibel dan dapat disesuaikan. Mari kita lihat lebih detail!

Poin Penting

• Penataan sepanjang sumbu utama dilakukan dengan properti justify-content.
• Anda dapat menggunakan berbagai nilai, seperti center, flex-start, flex-end, space-between dan space-around, untuk menyesuaikan tata letak Anda.
• Pengaturan Flexbox langsung mempengaruhi penataan elemen dalam arah yang diinginkan.

Panduan Langkah-demi-Langkah

1. Mulai dengan Menginisialisasi Flex-Container

Mulailah dengan membuat Flex-Container dan menetapkan arah Flex-nya. Dalam contoh ini, kami mengatur arah Flex ke baris. Ini berarti elemen-elemen akan diatur dalam satu baris dari kiri ke kanan.

2. Penataan Standar untuk Elemen-Elemen

Jika Anda meletakkan elemen-elemen ke dalam kontainer tanpa penyesuaian gaya khusus, Anda akan melihat bahwa secara default mereka akan terletak di awal kontainer. Anda dapat memberikan lebar 100 piksel kepada mereka untuk memberikan ilustrasi.

3. Penataan Tertengah

Untuk menengahkan elemen-elemen, Anda dapat menggunakan properti CSS justify-content dengan nilai center. Ini akan menata elemen-elemen Anda di tengah kontainer, menciptakan tata letak yang sangat menarik.

4. Penataan Elemen-Elemen di Akhir

Jika Anda ingin menata elemen-elemen ke ujung kontainer, Anda dapat menggunakan nilai flex-end untuk justify-content. Hal ini akan menggeser elemen-elemen ke ujung kanan kontainer Anda.

5. Penataan Elemen-Elemen di Awal

Perilaku standar tanpa penyesuaian adalah flex-start, yang berarti elemen-elemen akan tetap di awal kontainer. Pengaturan ini berguna jika Anda ingin tata letak elemen yang jelas dan rapi di bagian atas kontainer Anda.

6. Mengubah Arah Flex

Saat Anda mengubah arah Flex menjadi kolom, sumbu utama berubah dari horizontal menjadi vertikal. Ini berarti elemen-elemen sekarang akan diatur dari atas ke bawah.

7. Menengahkan Elemen dalam Penataan Vertikal

Anda juga dapat menengahkan elemen-elemen dalam penataan baru ini dengan menggunakan justify-content: center. Pengaturan ini akan membuat semua elemen ditampilkan di tengah kontainer.

8. Penataan di Ujung Bawah

Jika Anda ingin elemen-elemen di bagian bawah kontainer, Anda dapat mengatur flex-end lagi. Hal ini akan menempatkan elemen-elemen di ujung bawah kontainer Anda.

9. Menggunakan Properti Space

Flexbox juga memungkinkan Anda mengatur ruang di antara elemen-elemen Anda menggunakan space-between, space-around, dan space-evenly. Properti-properti ini akan mendistribusikan ruang yang tersedia dengan berbagai cara.

10. Memanfaatkan Space-Between

Dengan justify-content: space-between, elemen pertama akan tetap di atas dan elemen terakhir di bawah kontainer, sementara ruang di antara elemen akan didistribusikan secara merata.

Mencoba Space-Around

Jika Anda menggunakan space-around, ruang yang sama dibuat di sekitar setiap elemen. Jarak ini terlihat di tengah kontainer sementara elemen tetap terdistribusi secara merata.

Menggunakan Space-Evenly

Dengan menggunakan space-evenly, memastikan bahwa ruang lebih merata antara elemen dan pinggiran kontainer.

Ringkasan

Dalam panduan ini, Anda telah belajar cara mengatur penyejajaran di sumbu utama dengan Flexbox. Dengan menggunakan justify-content, Anda dapat membuat penempatan elemen Anda sangat fleksibel. Anda juga telah mengenal berbagai properti yang membantu Anda mencapai tata letak yang diinginkan. Manfaatkan pengetahuan ini untuk membuat desain yang menarik dan ramah pengguna!