Atribut justify-content CSS

Definisi dan penggunaan

atur-isi-ralatan (horisontal) untuk menarik item kotak lepas ketika item tidak mengisi semua ruang yang tersedia di sumbu utama.

Petunjuk:Gunakan atur-item-ralatan atur penarikan item secara vertikal.

Lihat pula:

Tutorial CSS:Flexbox CSS

Tutorial CSS:Grid CSS

Panduan CSS:atur-isi-ralatan

Panduan CSS:atur-item-ralatan

Panduan CSS:Properti align-self

Panduan HTML DOM:Properti justifyContent

Contoh

Ratakan item elasti di tengah kontainer:

div {
  display: flex;
  justify-content: center;
}

Coba sendiri

Bisa ditemukan lebih banyak contoh TIY di bawah halaman.

Syarat CSS

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

Nilai properti

Nilai Deskripsi
flex-start Nilai default. Item berada di awal kontainer.
flex-end Item berada di ujung kontainer.
center Item berada di tengah kontainer.
space-between Item mempunyai jarak di antara baris.
space-around Item menempati ruang di awal baris, antara baris, dan akhir baris.
initial Atur properti ini ke nilai default. Lihat: initial.
inherit Mengambil properti ini dari elemen induknya. Lihat: inherit.

Detil teknis

Nilai default: flex-start
Turunan: Tidak
Pembuatan animasi: Tidak didukung. Lihat:Properti berhubungan dengan animasi.
Versi: CSS3
Syarat Bahasa: object.style.justifyContent="space-between"

Contoh lebih banyak

Contoh

Ratakan item elasti di awal kontainer (default):

div {
  display: flex;
  justify-content: flex-start;
}

Coba sendiri

Contoh

Ratakan item elasti di ujung kontainer:

div {
  display: flex;
  justify-content: flex-end;
}

Coba sendiri

Contoh

Tampilkan item elasti dengan jarak di antara baris:

div {
  display: flex;
  justify-content: space-between;
}

Coba sendiri

Contoh

Tampilkan item elasti dengan jarak di awal baris, antara baris, dan akhir baris:

div {
  display: flex;
  justify-content: space-around;
}

Coba sendiri

Dukungan browser

Angka di tabel menunjukkan versi pertama browser yang mendukung properti ini.

Angka di tabel menunjukkan versi pertama browser yang mendukung properti ini, digunakan pengawalan prefiks pertama yang diikuti oleh -webkit- atau -moz-.

properti Chrome IE Firefox Safari Opera
justify-content 29.0
21.0 -webkit- 		11.0 28.0
18.0 -moz- 		9.0
6.1 -webkit- 		17.0