Sifat align-items

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

Sintaks

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

Nilai

Nilai	Keterangan
`flex-start`	Blok ditekan ke permulaan paksi melintang (menegak).
`flex-end`	Blok ditekan ke hujung paksi melintang (menegak).
`center`	Blok berada di tengah paksi melintang (menegak).
`baseline`	Elemen dijajarkan mengikut garis asas mereka. Garis asas ialah garis khayalan yang melalui bahagian bawah aksara tanpa mengambil kira descender, contohnya, seperti huruf `'p'` dan `'y'`.
`stretch`	Blok diregangkan, mengambil semua ruang yang tersedia sepanjang paksi melintang, sambil masih mengambil kira `min-width` dan `max-width`, jika ditetapkan. Jika lebar dan tinggi ditetapkan untuk elemen - `stretch` akan diabaikan.

Nilai lalai: stretch.

Contoh . Nilai stretch

Sekarang paksi utama mengarah dari kiri ke kanan, dan sepanjang paksi melintang elemen diregangkan pada keseluruhan ketinggian:

<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 + saiz elemen

Sekarang lebar dan tinggi ditetapkan untuk elemen, oleh itu nilai stretch untuk sifat 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 saiz elemen

Sekarang 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 + saiz elemen

Sekarang elemen masih akan ditekan ke atas, namun mereka akan mempunyai 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 + saiz elemen

Sekarang 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 + saiz elemen

Sekarang elemen akan berada di tengah sepanjang paksi melintang (dalam kes ini menegak):

<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 pelbagai saiz

Sekarang elemen mempunyai ketinggian yang berbeza (sekarang mereka dikembangkan oleh teks, tetapi boleh juga menetapkan height), lebar adalah sama untuk semua, kerana sifat 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 pelbagai saiz

Dan beginilah rupa penjajaran mengikut garis asas:

<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 . Penjajaran pada permulaan paksi menegak dalam grid

Mari jajarkan elemen kita dalam sel pada permulaan paksi menegak:

<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 lihat grid kita dalam penyahpepijat pelayar:

Contoh . Penjajaran di tengah paksi menegak dalam grid

Dan sekarang mari jajarkan elemen kita dalam sel di tengah paksi menegak:

<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 lihat paparan grid dalam penyahpepijat:

Contoh . Penjajaran pada hujung paksi menegak dalam grid

Sekali lagi ubah penjajaran elemen, kali ini pada hujung paksi menegak:

<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 lihat bagaimana rupa grid kita melalui penyahpepijat:

Lihat juga

sifat flex-direction,
yang menetapkan arah paksi blok flex
sifat justify-content,
yang menetapkan penjajaran pada paksi utama
sifat align-items,
yang menetapkan penjajaran pada paksi melintang
sifat flex-wrap,
yang multiline 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