CSS Properties: How to align content flex-end at the end of the container?

Last update on February 15 2024 06:20:24 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Define document type as HTML -->
<html><!-- Begin HTML document -->
<head><!-- Start of document header -->
<meta charset="utf-8"><!-- Specify character encoding -->
<title>How to align content flex-end at the end of the container</title><!-- Title of the HTML page -->
<style>/* Begin CSS styling */

div#xyz { /* CSS rule for div with id "xyz" */
width: 200px; /* Set width of the div to 200 pixels */
height: 250px; /* Set height of the div to 250 pixels */
border: 1px solid black; /* Set border of the div */
display: -webkit-flex; /* Safari */ /* Use flexbox layout for Safari */
-webkit-align-items: flex-end; /* Safari 7.0+ */ /* Align items at the end for Safari */
display:flex; /* Use flexbox layout for other browsers */
align-items:flex-end; /* Align items at the end for other browsers */
}
div#xyz div { /* CSS rule for divs nested under div with id "xyz" */
-webkit-flex: 1; /* Safari 6.1+ */ /* Allow the divs to grow equally for Safari */
flex: 1; /* Allow the divs to grow equally for other browsers */
}
</style><!-- End of CSS styling -->
</head><!-- End of document header -->
<body><!-- Start of document body -->

<div id="xyz"><!-- Start of div with id "xyz" -->
<div style="background-color:#99FF99;">Item1</div><!-- First nested div with background color -->
<div style="background-color:#33CCFF;">Item2  with more content.</div><!-- Second nested div with background color and text -->
<div style="background-color:#FF99FF;">Item3</div><!-- Third nested div with background color -->
</div><!-- End of div with id "xyz" -->

</body><!-- End of document body -->
</html><!-- End of HTML document -->

Explanation:

The HTML code creates a container div with the ID "xyz" and nested divs within it.
CSS is used to style the container div and its child divs, including setting width, height, border, and flexbox properties.
Flexbox properties are applied to align the child divs at the end of the container div using the align-items: flex-end; property.
The align-items property is set to "flex-end" for both Safari and other browsers to ensure the child divs are aligned at the end of the container.

Live Demo:

See the Pen align-content-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