Aligning a Single Item in the Flex Model in CSS

The next properties we'll look at are set not on the parent of the flex items, but on the items themselves. Let's look at the aling-self property, which aligns a single block along the cross axis.

Let's say we have flex blocks lined up in a row. Let's align them vertically to the center by setting align-items to center, and give the second element an additional class of elem and set a different alignment for it, for example, pin it to the top edge.

To do this, we set the elem property to flex-start for our element with the class elem:

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

Repeat the page according to this example: