ALIGN-ITEMS

‘align-items’ adalah properti CSS yang digunakan untuk mengubah posisi elemen anak di sumbu lintang dalam container Fleksibel atau Kotak Kotak. Secara default, nilai ini adalah ‘stretch’, yang berarti elemen anak akan memperluas untuk mengisi ruang tersedia sepenuhnya. Namun, nilai ini dapat diubah untuk mengatur posisi elemen secara berbeda.

Bagaimana Cara Kerja ‘align-items’

Properti ‘align-items’ bekerja dengan mengatur posisi elemen anak berdasarkan sumbu lintang (vertikal) dalam konteks kontainer Fleksibel / Kotak Kotak. Ini memiliki efek dramatis pada pola tata letak dan bagaimana elemen merespon perubahan ukuran layar.

Berikut adalah beberapa nilai yang dapat digunakan dengan properti ‘align-items’:

1. flex-start: Elemen anak diposisikan di awal garis lintang kontainer.
2. flex-end: Elemen anak diposisikan di akhir garis lintang kontainer.
3. center: Elemen anak diposisikan di tengah garis lintang kontainer.
4. baseline: Elemen anak diposisikan pada garis dasar konten.
5. stretch (default): Elemen anak diperluas untuk mengisi kontainer penuh, jika mungkin.

Perhatikan bahwa ‘align-items’ hanya berlaku untuk elemen dengan display: flex atau display: grid.

Cara Menggunakan ‘align-items’

Untuk menggunakan properti ‘align-items’, kamu perlu menentukan nilai yang sesuai. Berikut adalah contoh bagaimana cara melakukannya:

.container {
  display: flex;
  align-items: center;
}

Dalam contoh ini, semua elemen anak dalam .container akan diposisikan di tengah sumbu lintang, terlepas dari ukuran mereka sendiri.

‘align-items’ dan ‘flex-direction’

Nilai align-items tergantung pada arah fleksibel (ditentukan oleh flex-direction).

• Jika flex-direction: row atau row-reverse (default), ‘align-items’ akan membantu mengatur posisi elemen di sumbu vertikal.
• Jika flex-direction: column atau column-reverse, ‘align-items’ akan mengatur posisi elemen sepanjang sumbu horizontal.

Berikut adalah contoh penggunaan align-items dengan flex-direction:

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

Dalam contoh ini, semua elemen anak dalam .container akan diposisikan di awal sumbu horizontal.

‘Align-items’ adalah alat yang sangat kuat dalam kotak perkakas desain responsif. Dengan menggunakannya, kamu dapat membuat tata letak yang fleksibel dan adaptif dengan mudah.