Properti align-items

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

Sintaksis

selektor {
	align-items: flex-start | flex-end | center | baseline | stretch;
}

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).
`baseline`	Elemen disejajarkan menurut garis dasar mereka. Garis dasar adalah garis imajiner yang melewati tepi bawah karakter tanpa memperhitungkan descender, misalnya, seperti pada huruf `'p'` dan `'y'`.
`stretch`	Blok direntangkan, menempati semua ruang yang tersedia di sepanjang sumbu silang, namun tetap memperhatikan `min-width` dan `max-width`, jika ditetapkan. Jika lebar dan tinggi ditetapkan untuk elemen - `stretch` akan diabaikan.

Nilai default: stretch.

Contoh . Nilai stretch

Saat ini sumbu utama berarah dari kiri ke kanan, dan sepanjang sumbu silang elemen direntangkan ke seluruh tinggi:

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

#parent {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

Contoh . Nilai stretch + ukuran elemen

Saat ini untuk elemen ditetapkan lebar dan tinggi, oleh karena itu nilai stretch untuk properti align-items akan diabaikan:

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

#parent {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Contoh . Nilai flex-start tanpa ukuran elemen

Saat ini elemen akan ditekan ke atas:

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

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

Contoh . Nilai flex-start + ukuran elemen

Saat ini elemen tetap akan ditekan ke atas, namun mereka akan memiliki lebar dan tinggi yang ditetapkan:

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

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

Contoh . Nilai flex-end + ukuran elemen

Saat ini elemen akan ditekan ke bawah:

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

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

Contoh . Nilai center + ukuran elemen

Saat ini elemen akan berada di tengah sepanjang sumbu silang (dalam hal ini secara vertikal):

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

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

Contoh . Nilai center, elemen dengan ukuran berbeda

Saat ini elemen memiliki ukuran tinggi yang berbeda (saat ini mereka didorong oleh teks, tetapi bisa juga ditetapkan height), lebar semua sama, karena properti width ditetapkan:

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

#parent {
	display: flex;
	align-items: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	border: 1px solid #696989;
}

Contoh . Nilai baseline, elemen dengan ukuran berbeda

Dan beginilah tampilan perataan menurut garis dasar:

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

#parent {
	display: flex;
	align-items: baseline;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 130px;
	line-height: 1;
	border: 1px solid #696989;
}

Contoh . Perataan ke awal sumbu vertikal di grid

Mari kita sejajarkan elemen kita di dalam sel ke awal sumbu vertikal:

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

#parent {
	display: grid;
	align-items: flex-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;
}

Dan sekarang mari kita lihat grid kita di browser debugger:

Contoh . Perataan ke tengah sumbu vertikal di grid

Dan sekarang mari kita sejajarkan elemen kita di dalam sel ke tengah sumbu vertikal:

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

#parent {
	display: grid;
	align-items: 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;
}

Mari kita lihat tampilan grid di debugger:

Contoh . Perataan ke akhir sumbu vertikal di grid

Sekali lagi ubah perataan elemen, kali ini ke akhir sumbu vertikal:

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

#parent {
	display: grid;
	align-items: 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;
}
#elem1 {
	
}

Dan sekarang mari kita lihat bagaimana tampilan grid kita melalui debugger:

Lihat juga

properti flex-direction,
yang mengatur arah sumbu blok flex
properti justify-content,
yang mengatur perataan sepanjang sumbu utama
properti align-items,
yang mengatur perataan sepanjang sumbu silang
properti flex-wrap,
yang mengatur multi-barisnya 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 'serakah' blok flex
properti flex-shrink,
yang mengatur sifat menyusut blok flex
properti flex,
penyingkatan untuk flex-grow, flex-shrink dan flex-basis