CSS Properties: How to align self stretch is positioned to fit the container?

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

Solution:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><!-- Declare character encoding -->
<title>How to align self stretch is positioned to fit the container</title><!-- Set the title of the HTML document -->
<style type="text/css">/* 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: stretch; /* Safari 7.0+ */ /* Set alignment of items to "stretch" for Safari */
display: flex; /* Use flexbox layout for other browsers */
align-items: stretch; /* Set alignment of items to "stretch" 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#alignselfautoDiv {
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="alignselfautoDiv">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 "stretch", which stretches the items to fit the container's height.
One of the child div items (div#alignselfautoDiv) has its alignment set to center using CSS.
Since the parent container's align-items property is set to "stretch", the child div items inherit this property, resulting in them being stretched vertically to fit the container's height.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page