Sifat justify-content

Sifat justify-content menetapkan penjajaran elemen sepanjang paksi utama untuk blok flex dan sepanjang paksi mendatar untuk grid. Digunakan pada elemen induk.

Sintaks

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

Nilai

Nilai	Keterangan
`flex-start`	Blok dilekatkan pada permulaan paksi utama (mendatar).
`flex-end`	Blok dilekatkan pada hujung paksi utama (mendatar).
`center`	Blok diletakkan di tengah paksi utama (mendatar).
`space-between`	Blok diagihkan sepanjang paksi utama (mendatar), dengan elemen pertama dilekatkan pada permulaan paksi, dan elemen terakhir dilekatkan pada hujung paksi.
`space-around`	Blok diagihkan sepanjang paksi utama (mendatar), dengan jarak antara blok pertama dan permulaan paksi, blok terakhir dan hujung paksi adalah sama seperti jarak antara blok-blok lain. Walau bagaimanapun, jarak-jarak ini tidak sama seperti yang disangka: jarak ditambah dan antara dua blok jaraknya adalah dua kali ganda lebih besar daripada jarak antara blok dan permulaan/hujung paksi.

Nilai lalai: flex-start.

Contoh . Nilai flex-start

Sekarang paksi mengarah dari kiri ke kanan (ini dilakukan oleh flex-direction: row), dan blok dilekatkan pada 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 paksi juga mengarah dari kiri ke kanan, tetapi blok dilekatkan pada sisi kanan, kerana justify-content ditetapkan kepada 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 diletakkan di tengah tanpa mengira arah paksi 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 diagihkan sepanjang paksi utama, dengan elemen pertama dilekatkan pada permulaan paksi, dan elemen terakhir dilekatkan pada hujung paksi:

<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 diagihkan sepanjang paksi utama, dengan jarak antara blok pertama dan permulaan paksi, blok terakhir dan hujung paksi adalah sama seperti jarak antara blok-blok lain. Walau bagaimanapun, jarak ditambah dan antara dua blok jaraknya adalah dua kali ganda lebih besar daripada jarak antara blok dan permulaan/hujung paksi:

<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. Paksi ke bawah

Mari ubah arah paksi utama dengan menetapkan flex-direction kepada 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. Paksi ke bawah

Sekarang blok akan diagihkan secara sama rata menegak:

<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 . Penjajaran pada permulaan paksi mendatar (baris) dalam grid

Mari tetapkan penjajaran untuk elemen kami pada permulaan paksi mendatar:

<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 . Penjajaran pada tengah paksi mendatar dalam grid

Sekarang mari tetapkan penjajaran untuk elemen kami pada tengah paksi mendatar:

<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 . Penjajaran pada hujung paksi mendatar dalam grid

Mari tetapkan penjajaran untuk elemen kami pada hujung paksi mendatar:

<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

sifat flex-direction,
yang menetapkan arah paksi blok flex
sifat align-items,
yang menetapkan penjajaran sepanjang paksi silang
sifat flex-wrap,
yang menetapkan kepelbagaian baris blok flex
sifat flex-flow,
ringkasan untuk flex-direction dan flex-wrap
sifat order,
yang menetapkan susunan blok flex
sifat align-self,
yang menetapkan penjajaran satu blok
sifat flex-basis,
yang menetapkan saiz blok flex tertentu
sifat flex-grow,
yang menetapkan ketamakan blok flex
sifat flex-shrink,
yang menetapkan kebolehkecutan blok flex
sifat flex,
ringkasan untuk flex-grow, flex-shrink dan flex-basis