Align items css untuk apa?

The CSS align-items property specifies the default alignment for flex items. It is similar to the justify-content property but the vertical version.

This property is one of the CSS3 properties.

The align-items property accepts the following values:

• stretch
• flex-start
• center
• flex-end
• baseline

align-items: stretch | center | flex-start | flex-end | baseline | initial | inherit;

In the following example, the items are positioned at the center of the container.

In the next example, the items are placed at the beginning.

Here, we apply the "flex-end" value which places the items at the end of the container.

Let’s see our last example with the "baseline" value which places the items at the baseline of the container.

The align-items property is related to CSS layout. It effects how elements are aligned both in Flexbox and Grid layouts.

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

Syntax

align-items: flex-start | flex-end | center | baseline | stretch

The align-items property defines the default behavior for how items are laid out along the cross axis (perpendicular to the main axis).

Imagine a horizontal flexbox layout. That horizontal flow is the main axis, so align-items is the alignment opposite that, on the vertical axis. Bear in mind that changes when the main axis changes, and the cross axis changes with it.

You can think of align-items as the justify-content version for the cross-axis (perpendicular to the main-axis).

The rest of this article is fairly focused on flexbox rather than grid. The concepts are still very similar, but there are some differences. For example, in flexbox, the axises can change, where in grid they cannot. That effects things like flexbox having values like flex-start where in grid it is just start.

Ada 6 property yang hampir mirip. justify-items, justify-content, justify-self, align-items, align-content, align-self.

Aku sendiri memahami property tersebut sebagai berikut.

1. Semua justify mengatur element secara horizontal (atas-bawah).

2. Semua align mengatur element secara vertikal (kanan-kiri).

3. Semua -content mengatur hubungan child element dengan child element lainya yang berada dalam jangkauan flex. Contoh dalam satu div dengan flex ada 3 div, maka kita mengatur hubungan antar 3 div itu dengan properti ini.

4. Semua -items mengatur hubungan seluruh child element dengan parent elementnya. Contoh, dalam satu div dengan flex ada 3 div, maka dengan properti ini kita mengatur hubungan antar 3 div tersebut dengan div yang punya flex.

5. Semua items mengatur hubungan salah satu child element dengan parent elementnya. Contoh dalam satu div dengan flex ada 3 div, maka dengan properti ini kita bisa mengatur hubungan antar salah satu dari 3 div itu dengan parent elementnya.

Pada video ini kita akan membicarakan mengenai properti Align-Items dan Align-Self. Keduanya memiliki fungsi yang sama ya, yaitu untuk mengatur posisi item di dalam flexbox berdasarkan Cross Axis. Perbedaannya adalah Align-Items berlaku untuk semua item di dalam Flexbox, sedangkan Align-Self hanya berlaku untuk satu item saja.

Kita lihat ke Align-Items terlebih dahulu. Ada 5 buah nilai yang bisa kita berikan pada properti Align-Items. Yang pertama dan merupakan nilai default adalah Stretch, yang artinya item menggunakan seluruh ruang Cross Axis yang tersedia. Kita lihat pada gambar. Kita sedang menggunakan arah Main Axis Default yaitu dari kiri ke kanan, dan arah Cross Axis Default yaitu dari atas ke bawah. Setiap item di dalam flexbox ditarik ke bawah, sehingga memenuhi semua ruang vertikal di dalam flexbox.

Nilai kedua adalah flex-start, dimana item disusun di bagian awal dari Cross Axis. Kita bisa lihat pada gambar, semua kotak disusun secara rata atas. Nilai ketiga adalah flex-end, dimana item disusun di bagian akhir Cross Axis, pada contoh digambar semua kotak menjadi rata bawah. Nilai keempat adalah center, dimana semua kotak disusun di bagian tengah cross axis.

Dan nilai terakhir yang menarik adalah baseline, dimana item disusun rata berdasarkan kontennya. Pada gambar contoh, kita lihat bahwa tulisan di dalam kotak tersusun secara rata.

Kita mulai praktek. Kita buka source code dari video sebelumnya. Sebelum melanjutkan, kita ubah beberapa properti terlebih dahulu. Pada kelas container, kita ubah nilai properti width dan height menjadi 600 pixel. Kemudian kita hapus properti flex-direction, justify-content dan flex-wrap. Sekarang flexbox kita sudah kembali ke arah default, dengan Main Axis dari arah kiri ke kanan dan Cross Axis dari arah atas ke bawah.

Kita coba nilai pertama dari properti Align-Items, yaitu stretch. Tidak ada perubahan pada tampilan browser ya. Berhubung posisi Cross Axis kita sekarang adalah vertikal, maka untuk mendapatkan efek strecth, kita harus menghapus properti height pada kelas box. Nah, sekarang ukuran kotak sudah berubah, menjadi mengisi seluruh ruang vertikal.

Kemudian kita coba nilai kedua, yaitu flex-start. Sebelumnya kita kembalikan dahulu properti height pada kelas box. Lalu kita ubah nilai align-items menjadi flex-start. Tidak ada perubahan ya. Karena kotak memang sudah disusun pada bagian atas flexbox.

Untuk membuat agar contoh disini lebih menarik, kita coba height dari kotak hijau dan biru. Kita ke kelas green terlebih dahulu. Lalu kita ubah tingginya menjadi 2 kali lipat kotak lain dengan cara menambahkan properti height dengan nilai 200 pixel.

Lalu kita ubah kotak biru menjadi lebih pendek. Kita ke kelas blue. Lalu kita tambahkan properti height dengan nilai 75 pixel. Sekarang kita lihat bahwa kotak-kotak kita ada yang lebih tinggi dan ada yang lebih rendah, namun semuanya disusun secara rata pada bagian atas kotak.

Lalu kalau kita ubah nilai Align-Items menjadi flex-end. Maka sekarang kotak disusun secara rata pada bagian bawah kotak.

Nilai berikutnya yang bisa kita coba adalah Center. Sekarang kotak disusun pada bagian tengah secara vertikal.

Dan nilai yang menarik untuk dicoba disini adalah baseline. Kalau kita coba sekarang, maka kita mendapatkan hasil yang seolah-olah mirip dengan flex-start ya. Semua kotak disusun rata atas. Untuk melihat bedanya dengan flex-start, maka kita bisa mengubah font pada kotak hijau menjadi lebih besar. Misalkan kita ke kelas green, dan tambahkan properti font-size dengan nilai 8 rem. Sekarang posisi kotak lain menjadi turun. Dan kalau kita lihat pada konten setiap kotak, maka kita bisa melihat bahwa bagian bawah dari semua tulisan koten adalah sejajar.

Kita hapus lagi properti font-size pada kelas green. Selanjutnya yang menarik lagi untuk dicoba disini, kita ganti nilai align-items menjadi flex-end. Maka kotak-kotak disusun menjadi rata bawah. Nah, yang menariknya disini, arah Cross Axis bisa kita putar menjadi dari bawah ke atas. Caranya? Kita tambahkan properti flex-wrap dengan nilai flex-reverse. Hasilnya menjadi seolah-olah kita menggunakan nilai flex-start ya, karena arah Cross Axisnya telah berpindah menjadi dari bawah ke atas. Bagian akhir dari Cross Axis adalah atas.

Kita bisa melihat perbedaan dari penggunaan properti seperti ini apabila terjadi wrap. Misalkan nilai width kita ganti menjadi 300 pixel. Maka kotak 1 2 3 berada pada bagian awal Cross Axis yaitu di bawah. Sedangkan kotak 4 dan 5 berada di bagian atas.

Kalau arah Cross Axis kita kembalikan ke normal, yaitu nilai Wrap. Sedangkan Align-Items kita kembalikan ke flex-start. Maka kotak 1 2 3 berada pada bagian atas, dan kotak 4 5 berada di bagian bawah.

Kita juga bisa mencoba nilai-nilai lain dari Align-Items pada saat terjadi Wrap. Sebagai contoh lainnya, saya ubah nilai align-items menjadi stretch dan saya hapus properti height pada kelas box. Maka kita bisa melihat bahwa flexbox dibagi menjadi 2 baris. Lalu kotak yang tidak memiliki properti height akan ditarik untuk memenuhi seluruh ruang pada Cross Axis.

Saya kembalikan properti height pada kelas box. Lalu kita coba nilai flex-end pada align-items. Sekarang semua kotak disusun pada bagian bawah baris. Sedangkan kalau kita menggunakan nilai center, maka semua kotak akan disusun pada bagian tengah baris.

Selanjutnya kita coba putar Main Axis menjadi vertikal dari atas ke bawah. Secara otomatis Cross Axis berubah menjadi horizontal dari kiri ke kanan. Caranya? Kita sudah belajar dari video sebelumnya ya. Kita tambahkan properti flex-direction dengan nilai Column.

Pertama kita coba nilai align-items menjadi flex-start terlebih dahulu ya. Dan kita hapus properti flex-wrap. Sekarang semua kotak disusun secara rata pada bagian kiri. Karena arah awal Cross Axis kita berada di kiri ya. Sedangkan kalau kita ganti nilai align-items ke nilai flex-end, maka kotak akan rata di bagian kanan. Karena bagian akhir Cross Axis berada di sebelah kanan. Sementara kalau kita beri nilai center, maka seluruh kotak akan berada di bagian tengah.

Selanjutnya kita akan membahas mengenai properti Align-Self. Fungsinya masih sama dengan Align-Items, yaitu untuk mengatur posisi item berdasarkan Cross Axis. Namun Align-Self hanya berlaku untuk salah satu item saja ya. Sebagai contoh disini kita menggunakan Main Axis di arah default yaitu dari kiri ke kanan, dan Cross Axis di arah default dari arah atas ke bawah. Sedangkan properti Align-Self hanya digunakan pada kotak nomor tiga atau kotak berwarna hijau.

Kita bisa lihat pada nilai Stretch, semua kotak berada pada posisi rata atas, namun kotak hijau ditarik hingga menggunakan seluruh ruang Cross Axis. Kemudian pada nilai flex-start, semua kotak berada pada posisi bawah, sedangkan kotak hijau berada pada posisi atas.

Kita lihat pada nilai center, semua kotak berada pada posisi atas, namun kotak hijau berada di posisi tengah. Sedangkan pada nilai flex-end, semua kotak berada pada posisi atas, namun kotak hijau berada di posisi bawah.

Kita coba praktekkan properti align-self. Pertama kita ubah dahulu arah Main Axis dan Cross Axis menjadi default dengan cara mengapus properti Flex-Direction. Nilai Align-Items kita ubah menjadi Flex-Start. Lalu properti Width kita kembalikan ke nilai 600 px.

Kita akan mencoba properti align-self ini pada kotak hijau. Kita buka kembali kode HTML. Kalau sebelumnya, properti-properti Flexbox yang telah kita pelajari kita taruh pada kelas container. Untuk properti align-self ini, harus kita taruh pada item di dalam flexbox. Berarti mesti di salah satu div yang berada di dalam section ini.

Kalau kita mau merujuk ke kotak hijau, kita bisa melihat bahwa div ini menggunakan 2 buah kelas, yaitu box dan green. Sedangkan kelas box juga digunakan di kelima div. Jadi kalau kita ingin merujuk secara khusus ke kotak hijau, maka kita menaruh propertinya di dalam kelas green.

Kita kembali ke kode CSS dan kita menuju ke kelas green. Kita tambahkan properti align-self dengan nilai stretch. Tidak ada perubahan ya. Karena untuk menggunakan nilai ini, kita harus menghapus properti height-nya. Sekarang kita hapus properti height pada kelas green dan kelas box. Nah, sekarang kita bisa melihat bahwa semua kotak yang lain disusun secara flex-start atau rata atas, sedangkan kotak hijau ditarik hingga memenuhi seluruh ruang vertikal yang tersedia.

Kita kembalikan semua nilai height yang kita hapus barusan. Lalu kita ubah align-self menjadi flex-end. Nah, sekarang semua kotak berada di posisi atas, sedangkan kotak hijau berada di bawah sendiri. Kalau kita ubah menjadi center, maka kotak hijau berada di tengah. Sedangkan kalau kita ubah menjadi flex-start maka kotak hijau akan kembali ke atas.

Kita bisa menggunakan properti Align-Self ini di beberapa kotak sekaligus. Misalkan kita ingin kotak hijau berada di tengah, sedangkan kotak biru berada di bawah. Maka kita tinggal menambahkan ke kelas green properti Align-Self dengan nilai Center. Lalu kita tambahkan ke kelas blue, properti Align-Self dengan nilai Flex-End.

Align

Apa perbedaan antara properti align content dan properti align

Flex

Apa itu Flex Grow?