Penjajaran Elemen Flex Sepanjang Paksi Utama dalam CSS
Sifat justify-content membolehkan
penjajaran elemen sepanjang paksi utama. Sebelum ini,
anda telah mempelajari nilai-nilai center,
space-between, space-around,
space-evenly. Mari kita pelajari
beberapa nilai lagi sekarang.
Nilai flex-start menolak elemen ke permulaan
paksi utama, manakala nilai flex-end - ke hujung.
Mari lihat contoh-contohnya.
Contoh
Mari arahkan paksi utama dari kiri ke kanan, dengan menetapkan
sifat flex-direction kepada nilai row.
Mari tolak blok ke permulaan paksi. Untuk ini, justify-content
ditentukan kepada nilai flex-start:
.parent {
display: flex;
flex-direction: row; /* paksi utama dari kiri ke kanan */
justify-content: flex-start; /* blok ke permulaan paksi utama */
}
Hasil pelaksanaan kod:
Contoh
Sekarang mari tolak blok ke hujung paksi.
Untuk ini, justify-content ditetapkan
kepada nilai flex-end:
.parent {
display: flex;
flex-direction: row; /* paksi utama dari kiri ke kanan */
justify-content: flex-end; /* blok ke hujung paksi utama */
}
Hasil pelaksanaan kod:
Contoh
Sekarang mari arahkan paksi utama dari kanan ke kiri,
dengan menetapkan sifat flex-direction kepada nilai
row-reverse. Mari tolak blok ke permulaan
paksi, iaitu ke tepi kanan. Untuk ini, justify-content
ditentukan kepada nilai flex-start:
.parent {
display: flex;
flex-direction: row-reverse; /* paksi utama dari kanan ke kiri */
justify-content: flex-start; /* blok ke permulaan paksi utama */
}
Hasil pelaksanaan kod:
Contoh
Dan sekarang mari tolak blok ke hujung paksi utama,
iaitu ke tepi kiri. Untuk ini, justify-content
ditentukan kepada nilai flex-end:
.parent {
display: flex;
flex-direction: row-reverse; /* paksi utama dari kanan ke kiri */
justify-content: flex-end; /* blok ke hujung paksi utama */
}
Hasil pelaksanaan kod:
Contoh
Dalam contoh sebelumnya, paksi utama diarahkan secara mendatar. Sekarang mari kita terbalikkannya dan arahkan secara menegak.
Mari arahkan paksi utama ke bawah, dengan menetapkan
sifat flex-direction kepada nilai
column.
Mari tolak blok ke permulaan paksi utama, iaitu
ke tepi atas. Untuk ini, justify-content
ditentukan kepada nilai flex-start:
.parent {
display: flex;
flex-direction: column; /* paksi utama dari atas ke bawah */
justify-content: flex-start; /* blok ke permulaan paksi utama */
}
Hasil pelaksanaan kod:
Contoh
Sekarang mari tolak blok ke hujung paksi utama,
iaitu ke tepi bawah. Untuk ini, justify-content
ditentukan kepada nilai flex-end:
.parent {
display: flex;
flex-direction: column; /* paksi utama dari atas ke bawah */
justify-content: flex-end; /* blok ke hujung paksi utama */
}
Hasil pelaksanaan kod:
Contoh
Mari terbalikkan paksi utama, dengan mengarahkannya dari bawah
ke atas. Untuk ini, sifat flex-direction
ditetapkan kepada nilai column-reverse. Dalam
kes ini, blok akan menukar susunannya -
pada permulaan paksi akan terletak blok terakhir dalam
kod HTML.
Mari tolak blok ke permulaan paksi utama,
iaitu ke tepi bawah. Untuk ini, justify-content
ditentukan kepada nilai flex-start:
.parent {
display: flex;
flex-direction: column-reverse; /* paksi utama dari bawah ke atas */
justify-content: flex-start; /* blok ke permulaan paksi utama */
}
Hasil pelaksanaan kod:
Contoh
Mari tolak blok ke hujung paksi utama,
iaitu ke tepi atas. Untuk ini, justify-content
ditentukan kepada nilai flex-end:
.parent {
display: flex;
flex-direction: column-reverse; /* paksi utama dari bawah ke atas */
justify-content: flex-end; /* blok ke hujung paksi utama */
}
Hasil pelaksanaan kod:
