Penjajaran Blok Flex Sepaksi Silang dalam CSS

Sekarang mari kita menjajarkan blok seaksi silang. Penjajaran sepanjang paksi ini ditentukan oleh sifat align-items. Nilai flex-start melekatkan elemen ke permulaan paksi, dan nilai flex-end - ke hujung.

Mari kita cuba dengan contoh.

Contoh

Mari arahkan paksi utama dari kiri ke kanan. Dalam kes ini, paksi silang akan diarahkan dari atas ke bawah. Mari kita laraskan kedudukan blok kami kedua-duanya sepanjang paksi utama dan paksi silang.

Sepaksi utama, mari lekangkan blok ke permulaannya, iaitu ke tepi kiri. Untuk ini, justify-content ditetapkan kepada nilai flex-start. Sepaksi silang, kami juga akan melekatkan blok ke permulaannya, iaitu ke tepi atas. Untuk ini, align-items juga ditetapkan kepada nilai flex-start.

Mari lihat hasilnya:

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

Hasil pelaksanaan kod:

Contoh

Sekarang mari lekangkan blok ke hujung paksi silang, iaitu ke bahagian bawah. Untuk ini, align-items ditetapkan kepada nilai flex-end:

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

Hasil pelaksanaan kod:

Contoh

Sekarang mari arahkan paksi utama dari atas ke bawah. Memandangkan paksi utama menegak, paksi silang akan diarahkan dari kanan ke kiri. Mari lekangkan blok sepanjang kedua-dua paksi ke permulaannya:

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

Hasil pelaksanaan kod:

Contoh

Dan sekarang sepanjang paksi silang, mari lekangkan blok ke hujungnya:

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

Hasil pelaksanaan kod:

Contoh

Mari lekangkan blok ke hujung kedua-dua paksi:

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

Hasil pelaksanaan kod:

Contoh

Mari tukar arah paksi utama - arahkannya dari bawah ke atas. Pada masa yang sama, paksi silang tidak akan mengubah arahnya, kerana paksi utama masih menegak.

Mari lekangkan blok ke permulaan kedua-dua paksi:

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

Hasil pelaksanaan kod:

Tugas Amali

Ulang halaman mengikut contoh ini: