Penyelarasan Elemen Flex di Sepanjang Sumbu Utama dalam CSS
Properti justify-content memungkinkan
penyelarasan elemen di sepanjang sumbu utama. Sebelumnya
Anda telah mempelajari nilai-nilai center,
space-between, space-around,
space-evenly. Sekarang mari kita pelajari
beberapa nilai lagi.
Nilai flex-start mendorong elemen ke awal
sumbu utama, dan nilai flex-end - ke akhir.
Mari kita lihat contoh-contohnya.
Contoh
Arahkan sumbu utama dari kiri ke kanan, dengan memberikan
properti flex-direction nilai row.
Dorong blok ke awal sumbu. Untuk ini, justify-content
atur ke nilai flex-start:
.parent {
display: flex;
flex-direction: row; /* sumbu utama dari kiri ke kanan */
justify-content: flex-start; /* blok ke awal sumbu utama */
}
Hasil eksekusi kode:
Contoh
Sekarang mari dorong blok ke akhir sumbu.
Untuk ini, justify-content atur
ke nilai flex-end:
.parent {
display: flex;
flex-direction: row; /* sumbu utama dari kiri ke kanan */
justify-content: flex-end; /* blok ke akhir sumbu utama */
}
Hasil eksekusi kode:
Contoh
Sekarang arahkan sumbu utama dari kanan ke kiri,
dengan memberikan properti flex-direction nilai
row-reverse. Dorong blok ke awal
sumbu, yaitu ke tepi kanan. Untuk ini, justify-content
atur ke nilai flex-start:
.parent {
display: flex;
flex-direction: row-reverse; /* sumbu utama dari kanan ke kiri */
justify-content: flex-start; /* blok ke awal sumbu utama */
}
Hasil eksekusi kode:
Contoh
Dan sekarang mari dorong blok ke akhir sumbu utama,
yaitu ke tepi kiri. Untuk ini, justify-content
atur ke nilai flex-end:
.parent {
display: flex;
flex-direction: row-reverse; /* sumbu utama dari kanan ke kiri */
justify-content: flex-end; /* blok ke akhir sumbu utama */
}
Hasil eksekusi kode:
Contoh
Pada contoh sebelumnya, sumbu utama diarahkan secara horizontal. Sekarang mari kita balik dan arahkan secara vertikal.
Mari arahkan sumbu utama ke bawah, dengan memberikan
properti flex-direction nilai
column.
Dorong blok ke awal sumbu utama, yaitu
ke tepi atas. Untuk ini, justify-content
atur ke nilai flex-start:
.parent {
display: flex;
flex-direction: column; /* sumbu utama dari atas ke bawah */
justify-content: flex-start; /* blok ke awal sumbu utama */
}
Hasil eksekusi kode:
Contoh
Sekarang mari dorong blok ke akhir sumbu utama,
yaitu ke tepi bawah. Untuk ini, justify-content
atur ke nilai flex-end:
.parent {
display: flex;
flex-direction: column; /* sumbu utama dari atas ke bawah */
justify-content: flex-end; /* blok ke akhir sumbu utama */
}
Hasil eksekusi kode:
Contoh
Balik sumbu utama, arahkan dari bawah
ke atas. Untuk ini, properti flex-direction
beri nilai column-reverse. Dalam
hal ini, blok akan menukar urutannya -
di awal sumbu akan berdiri blok terakhir dalam kode HTML.
Mari dorong blok ke awal sumbu utama,
yaitu ke tepi bawah. Untuk ini, justify-content
atur ke nilai flex-start:
.parent {
display: flex;
flex-direction: column-reverse; /* sumbu utama dari bawah ke atas */
justify-content: flex-start; /* blok ke awal sumbu utama */
}
Hasil eksekusi kode:
Contoh
Mari dorong blok ke akhir sumbu utama,
yaitu ke tepi atas. Untuk ini, justify-content
atur ke nilai flex-end:
.parent {
display: flex;
flex-direction: column-reverse; /* sumbu utama dari bawah ke atas */
justify-content: flex-end; /* blok ke akhir sumbu utama */
}
Hasil eksekusi kode:
