CSS Properties: How to align self element is positioned at the end of the container?

Last update on February 15 2024 10:04:56 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><!-- Declare character encoding -->
<title>How to align self element is positioned at the end of the container</title><!-- Set the title of the HTML document -->
<style>/* CSS style start*/
#xyz {
width: 200px; /* Set width of the container */
height: 250px; /* Set height of the container */
border: 1px solid black; /* Set border of the container */
display: -webkit-flex; /* Safari */ /* Use flexbox layout for Safari */
-webkit-align-items: flex-end; /* Safari 7.0+ */ /* Set alignment of items to "flex-end" vertically for Safari */
display: flex; /* Use flexbox layout for other browsers */
align-items: flex-end; /* Set alignment of items to "flex-end" vertically for other browsers */
}
#xyz div {
-webkit-flex: 1; /* Safari 6.1+ */ /* Allow the divs to grow and shrink to fill the available space horizontally for Safari */
flex: 1; /* Allow the divs to grow and shrink to fill the available space horizontally for other browsers */
}
div#alignselfDiv {
align-self:center; /* Align this specific item vertically to the center */
}

</style>
</head>
<body>
<div id="xyz">
<div style="background-color:#99FF99;">Item1</div><!-- First div item -->
<div style="background-color:#33CCFF;" id="alignselfDiv">Item2 with more content.</div><!-- Second div item with alignment specified -->
<div style="background-color:#FF99FF;">Item3</div><!-- Third div item -->
</div>
</body>
</html>

Explanation:

The HTML document contains a flexible container (div#xyz) with three child div items.
The align-items property of the container and the child div items is set to "flex-end", which aligns the items vertically at the end of the container.
One of the child div items (div#alignselfDiv) has its alignment set to center using CSS, but this alignment setting is overridden by the container's alignment, causing it to align at the end of the container.

Live Demo:

See the Pen align-self-flex-end-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page