Penyelarasan Blok Flex pada Sumbu Silang di CSS

Sekarang mari kita sejajarkan blok-blok pada sumbu silang. Penyelarasan pada sumbu ini ditetapkan oleh properti align-items. Nilai flex-start menekan elemen ke awal sumbu, dan nilai flex-end - ke akhir.

Mari kita coba dengan contoh.

Contoh

Mari arahkan sumbu utama dari kiri ke kanan. Dalam hal ini sumbu silang akan diarahkan dari atas ke bawah. Mari atur posisi blok-blok kita pada sumbu utama dan sumbu silang.

Pada sumbu utama, tekan blok ke awalnya, yaitu ke tepi kiri. Untuk itu justify-content atur ke nilai flex-start. Pada sumbu silang, tekan juga blok ke awalnya, yaitu ke tepi atas. Untuk itu align-items juga atur ke nilai flex-start.

Mari lihat hasilnya:

.parent {
	display: flex;
	flex-direction:  row;        /* sumbu utama ke kanan, sumbu silang ke bawah */
	justify-content: flex-start; /* blok ke awal sumbu utama */
	align-items:     flex-start; /* blok ke awal sumbu silang */
}

Hasil eksekusi kode:

Contoh

Sekarang mari tekan blok ke akhir sumbu silang, yaitu ke bawah. Untuk itu align-items atur ke nilai flex-end:

.parent {
	display: flex;
	flex-direction:  row;        /* sumbu utama ke kanan, sumbu silang ke bawah */
	justify-content: flex-start; /* blok ke awal sumbu utama */
	align-items:     flex-end;   /* blok ke akhir sumbu silang */
}

Hasil eksekusi kode:

Contoh

Sekarang mari arahkan sumbu utama dari atas ke bawah. Karena sumbu utama vertikal, maka sumbu silang akan diarahkan dari kanan ke kiri. Mari tekan blok pada kedua sumbu ke awalnya:

.parent {
	display: flex;
	flex-direction:  column;     /* sumbu utama ke bawah, sumbu silang ke kanan */
	justify-content: flex-start; /* blok ke awal sumbu utama */
	align-items:     flex-start; /* blok ke awal sumbu silang */
}

Hasil eksekusi kode:

Contoh

Dan sekarang pada sumbu silang tekan blok ke akhirnya:

.parent {
	display: flex;
	flex-direction:  column;     /* sumbu utama ke bawah, sumbu silang ke kanan */
	justify-content: flex-start; /* blok ke awal sumbu utama */
	align-items:     flex-end;   /* blok ke akhir sumbu silang */
}

Hasil eksekusi kode:

Contoh

Mari tekan blok ke akhir kedua sumbu:

.parent {
	display: flex;
	flex-direction:  column;   /* sumbu utama ke bawah, sumbu silang ke kanan */
	justify-content: flex-end; /* blok ke akhir sumbu utama */
	align-items:     flex-end; /* blok ke akhir sumbu silang */
}

Hasil eksekusi kode:

Contoh

Mari ubah arah sumbu utama - arahkan dari bawah ke atas. Dalam hal ini sumbu silang tidak akan mengubah arahnya, karena sumbu utama masih vertikal.

Mari tekan blok ke awal kedua sumbu:

.parent {
	display: flex;
	flex-direction:  column-reverse; /* sumbu utama ke atas, sumbu silang ke kanan */
	justify-content: flex-start;     /* blok ke awal sumbu utama */
	align-items:     flex-start;     /* blok ke awal sumbu silang */
}

Hasil eksekusi kode:

Tugas Praktis

Ulangi halaman sesuai contoh berikut: