Properti justify-content

Properti justify-content mengatur perataan elemen sepanjang sumbu utama untuk blok flex dan sepanjang sumbu horizontal untuk grid. Diterapkan pada elemen induk.

Sintaks

selektor {
	justify-content: flex-start | flex-end | center | space-between | space-around;
}

Nilai

Nilai	Deskripsi
`flex-start`	Blok ditekan ke awal sumbu utama (horizontal).
`flex-end`	Blok ditekan ke akhir sumbu utama (horizontal).
`center`	Blok berada di tengah sumbu utama (horizontal).
`space-between`	Blok didistribusikan sepanjang sumbu utama (horizontal), dengan elemen pertama ditekan ke awal sumbu, dan elemen terakhir - ke akhir.
`space-around`	Blok didistribusikan sepanjang sumbu utama (horizontal), dengan jarak antara blok pertama dan awal sumbu, blok terakhir dan akhir sumbu sama dengan jarak antara blok lainnya. Namun, mereka tidak sama, seperti yang mungkin terlihat: jarak dijumlahkan dan antara dua blok jaraknya dua kali lebih besar daripada antara blok dan awal/akhir sumbu.

Nilai default: flex-start.

Contoh . Nilai flex-start

Sekarang sumbu diarahkan dari kiri ke kanan (ini dilakukan oleh flex-direction: row), dan blok ditekan ke sisi kiri:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Contoh . Nilai flex-end

Dalam contoh ini sumbu juga diarahkan dari kiri ke kanan, tetapi blok ditekan ke sisi kanan, karena justify-content diatur ke nilai flex-end:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: flex-end;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Contoh . Nilai center

Sekarang blok akan berada di tengah terlepas dari arah sumbu utama:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Contoh . Nilai space-between

Blok didistribusikan sepanjang sumbu utama, dengan elemen pertama ditekan ke awal sumbu, dan elemen terakhir - ke akhir:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Contoh . Nilai space-around

Blok didistribusikan sepanjang sumbu utama, dengan jarak antara blok pertama dan awal sumbu, blok terakhir dan akhir sumbu sama dengan jarak antara blok lainnya. Namun, jarak dijumlahkan dan antara dua blok jaraknya dua kali lebih besar daripada antara blok dan awal/akhir sumbu:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Contoh . Nilai center. Sumbu ke bawah

Mari ubah arah sumbu utama dengan mengatur flex-direction ke nilai column:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Contoh . Nilai space-between. Sumbu ke bawah

Sekarang blok akan didistribusikan secara merata secara vertikal:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Contoh . Perataan ke awal sumbu horizontal (baris) dalam grid

Mari atur perataan untuk elemen kita ke awal sumbu horizontal:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Contoh . Perataan ke tengah sumbu horizontal dalam grid

Dan sekarang mari atur perataan untuk elemen kita ke tengah sumbu horizontal:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Contoh . Perataan ke akhir sumbu horizontal dalam grid

Mari atur perataan untuk elemen kita ke akhir sumbu horizontal:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Lihat juga

properti flex-direction,
yang mengatur arah sumbu blok flex
properti align-items,
yang mengatur perataan sepanjang sumbu silang
properti flex-wrap,
yang mengatur multi-baris blok flex
properti flex-flow,
penyingkatan untuk flex-direction dan flex-wrap
properti order,
yang mengatur urutan blok flex
properti align-self,
yang mengatur perataan satu blok
properti flex-basis,
yang mengatur ukuran blok flex tertentu
properti flex-grow,
yang mengatur sifat "rakus" blok flex
properti flex-shrink,
yang mengatur sifat menyusut blok flex
properti flex,
penyingkatan untuk flex-grow, flex-shrink dan flex-basis