Properti align-content

Properti align-content mengatur perataan elemen sepanjang sumbu silang untuk blok flex dan pada sumbu vertikal untuk grid. Diterapkan pada elemen induk.

Sintaks

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

Nilai

Nilai	Deskripsi
`flex-start`	Blok ditekan ke awal sumbu silang (vertikal).
`flex-end`	Blok ditekan ke akhir sumbu silang (vertikal).
`center`	Blok berada di tengah sumbu silang (vertikal).
`space-between`	Blok didistribusikan sepanjang sumbu silang (vertikal), dengan elemen pertama ditekan ke awal sumbu, dan elemen terakhir - ke akhir.
`space-around`	Blok didistribusikan sepanjang sumbu silang (vertikal), 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.

Contoh . Nilai flex-start

Dalam contoh ini, sumbu tempat perataan dilakukan diarahkan dari atas ke bawah, yaitu sumbu silang. Seperti yang dapat dilihat dari hasilnya, semua elemen kita ditekan ke bagian 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 sumbu silang, karena properti align-content diatur ke 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 diatur ke tengah sumbu silang:

<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;
}

Perataan di awal sumbu vertikal di grid

Mari kita atur perataan untuk elemen kita di grid ke awal sumbu vertikal:

<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;
}

Perataan di tengah sumbu vertikal di grid

Dan sekarang mari kita atur perataan elemen ke tengah sumbu vertikal:

<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;
}

Perataan di akhir sumbu vertikal di grid

Mari kita atur perataan elemen ke akhir sumbu vertikal:

<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

properti flex-direction,
yang mengatur arah sumbu blok flex
properti justify-content,
yang mengatur perataan pada sumbu utama
properti align-items,
yang mengatur perataan pada 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 place-content,
yang mengatur perataan pada sumbu utama dan sumbu silang