Penjajaran Elemen Individu dalam Model Flex CSS

Sifat-sifat seterusnya yang akan kita pelajari, tidak ditetapkan kepada induk elemen-elemen flex, tetapi kepada elemen itu sendiri. Mari kita lihat sifat align-self, yang menjajarkan blok individu pada paksi silang.

Katakan kita mempunyai blok-flex yang disusun secara berturut. Mari jajarkan mereka di tengah secara menegak, dengan menetapkan align-items kepada nilai center, dan berikan elemen kedua kelas tambahan elem dan untuknya, tetapkan penjajaran yang berbeza, contohnya, letakkannya ke bahagian atas.

Untuk melakukan ini, untuk elemen kita dengan kelas elem tetapkan sifat align-self kepada nilai flex-start:

<div class="parent">
	<div class="child">1</div>
	<div class="child elem">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
</div>

.parent {
	display: flex;
	align-items: center;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 50px;
	height: 50px;
	border: 1px solid green;
}
.elem {
	align-self: flex-start;
}

Ulang halaman mengikut contoh ini: