Css3 (Foto: Text Formatting: Text-Align, Text-Decoration, Text-Transform, Letter-Spacing.)

Flexbox Alignment: Menguasai Justify-Content dan Align-Items

Kunci untuk memahami perataan Flexbox adalah selalu mengingat arah flex-direction. Jika arahnya row, maka justify-content mengatur posisi horizontal. Jika arahnya column, maka justify-content mengatur posisi vertikal.

1. Justify-Content (Perataan Sumbu Utama)

Properti ini mengatur bagaimana ruang kosong di antara atau di sekitar elemen didistribusikan di sepanjang Main Axis.

• flex-start (Default): Elemen bertumpuk di awal sumbu.

• flex-end: Elemen bertumpuk di akhir sumbu.

• center: Elemen dikumpulkan tep at di tengah.

• space-between: Elemen pertama di awal, elemen terakhir di akhir, dan ruang kosong dibagi rata di antaranya.

• space-around: Setiap elemen mendapatkan ruang kosong yang sama di sisi kiri dan kanannya.

• space-evenly: Semua ruang kosong (antar elemen dan ke pinggir kontainer) benar-benar sama rata.

2. Align-Items (Perataan Sumbu Silang)

Properti ini mengatur bagaimana elemen disejajarkan di sepanjang Cross Axis (sumbu yang tegak lurus dengan Main Axis).

• stretch (Default): Elemen akan ditarik untuk memenuhi tinggi (atau lebar) kontainer induknya.

• flex-start: Elemen disejajarkan di bagian awal sumbu silang.

• flex-end: Elemen disejajarkan di bagian akhir sumbu silang.

• center: Elemen disejajarkan tepat di tengah-tengah sumbu silang.

• baseline: Elemen disejajarkan berdasarkan garis dasar tulisan (baseline teks).

Tutorial: Menengahkan Elemen secara Sempurna

Dahulu, menengahkan sebuah kotak di dalam kotak lain adalah tantangan besar. Dengan Flexbox, Anda hanya butuh tiga baris kode "ajaib".

Struktur HTML

<div class="parent"> <div class="child">Tepat di Tengah!div>
div>

Kode CSS

.parent { display: flex; height: 300px; background-color: #f1f1f1; /* Menengahkan secara Horizontal */ justify-content: center; /* Menengahkan secara Vertikal */ align-items: center;
} .child { padding: 20px; background-color: #3498db; color: white; border-radius: 8px;
}

Tips Pro untuk Developer

1. Gunakan Space-Between untuk Header: Ini adalah cara termudah untuk membuat logo di sisi kiri dan menu navigasi di sisi k anan tanpa perlu menggunakan float atau margin-left: auto.

2. Align-Self untuk Pengecualian: Jika Anda ingin salah satu elemen anak memiliki posisi berbeda sendiri, gunakan properti align-self pada elemen anak tersebut. Ia akan menimpa aturan align-items dari induknya.

3. Tinggi Kontainer: Ingat bahwa align-items tidak akan terlihat efeknya jika kontainer induk tidak memiliki tinggi (height) yang lebih besar dari elemen anaknya.