Sifat align-content

Sifat align-content menentukan penjajaran elemen sepanjang paksi melintang untuk blok flex dan pada paksi menegak untuk grid. Digunakan pada elemen induk.

Sintaks

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

Nilai

Nilai	Keterangan
`flex-start`	Blok ditekan ke permulaan paksi melintang (menegak).
`flex-end`	Blok ditekan ke hujung paksi melintang (menegak).
`center`	Blok terletak di tengah paksi melintang (menegak).
`space-between`	Blok diagih sepanjang paksi melintang (menegak), dengan elemen pertama ditekan ke permulaan paksi, dan elemen terakhir - ke hujung.
`space-around`	Blok diagih sepanjang paksi melintang (menegak), dengan jarak antara blok pertama dan permulaan paksi, blok terakhir dan hujung paksi adalah sama seperti antara blok-blok lain. Walau bagaimanapun, ia tidak sama, seperti yang mungkin kelihatan: jarak ditambah dan antara dua blok jaraknya dua kali ganda lebih besar daripada antara blok dan permulaan/hujung paksi.

Contoh . Nilai flex-start

Dalam contoh ini, paksi di mana penjajaran dilakukan berarah dari atas ke bawah, iaitu ia adalah melintang. Seperti yang dapat dilihat dari hasil yang diperoleh, semua elemen kami ditekan ke bahagian atasnya:

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

#parent {
	display: flex;
	align-content: flex-start;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Contoh . Nilai flex-end

Dalam contoh ini, blok ditekan ke sisi bawah paksi melintang, kerana sifat align-content ditetapkan kepada nilai flex-end:

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

#parent {
	display: flex;
	align-content: flex-end;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Contoh . Nilai center

Sekarang blok dijajarkan di tengah paksi melintang:

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

#parent {
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Penjajaran pada permulaan paksi menegak dalam grid

Mari tetapkan penjajaran untuk elemen kami dalam grid pada permulaan paksi menegak:

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

#parent {
	display: grid;
	align-content: start;
	grid-template-columns: 100px 100px;
	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;
}

Penjajaran di tengah paksi menegak dalam grid

Dan sekarang mari tetapkan penjajaran elemen di tengah paksi menegak:

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

#parent {
	display: grid;
	align-content: center;
	grid-template-columns: 100px 100px;
	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;
}

Penjajaran pada hujung paksi menegak dalam grid

Mari tetapkan penjajaran elemen pada hujung paksi menegak:

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

#parent {
	display: grid;
	align-content: end;
	grid-template-columns: 100px 100px;
	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 menentukan arah paksi blok flex
sifat justify-content,
yang menentukan penjajaran pada paksi utama
sifat align-items,
yang menentukan penjajaran pada paksi melintang
sifat flex-wrap,
yang menentukan kepelbagaian baris blok flex
sifat flex-flow,
penyingkatan untuk flex-direction dan flex-wrap
sifat order,
yang menentukan susunan blok flex
sifat align-self,
yang menentukan penjajaran satu blok
sifat place-content,
yang menentukan penjajaran pada paksi utama dan melintang