HTML-CSS: Evenly distributed children

Last update on March 08 2024 13:35:26 (UTC/GMT +8 hours)

HTML-CSS : Exercise-25 with Solution

Using HTML, CSS evenly distributes child elements within a parent element.

Use display: flex to use the flexbox layout.
Use justify-content: space-between to evenly distributes child elements horizontally. The first item is positioned at the left edge, while the last item is positioned at the right edge.
Alternatively, use justify-content: space-around to distribute the children with space around them, instead of between them.

HTML Code:

<!--License: https://bit.ly/3GjrtVF--><!-- Comment: Indicates the license information for the code -->
<!DOCTYPE html><!-- Comment: Declares the document type and version of HTML -->
<html><!-- Comment: Indicates the start of the HTML document -->
<head><!-- Comment: Contains meta-information about the HTML document -->
<meta charset="utf-8"><!-- Comment: Declares the character encoding for the document -->
<meta name="viewport" content="width=device-width"><!-- Comment: Sets the viewport width to the width of the device -->
<title>Using HTML, CSS evenly distributes child elements within a parent element</title><!-- Comment: Sets the title of the document -->
</head><!-- Comment: End of the head section -->
<body><!-- Comment: Contains the content of the HTML document -->
<div class="evenly-distributed-children"><!-- Comment: Defines a container for the child elements to be evenly distributed -->
<p>Case 1</p><!-- Comment: First child paragraph element -->
<p>Case 2</p><!-- Comment: Second child paragraph element -->
<p>Case 3</p><!-- Comment: Third child paragraph element -->
</div><!-- Comment: End of the container for evenly distributed children -->
</body><!-- Comment: End of the body section -->
</html><!-- Comment: End of the HTML document -->

Explanation:

This HTML code creates a simple webpage with a container div for child elements to be evenly distributed.
The  comment indicates the license information for the code.
<!DOCTYPE html> declares the document type and version of HTML, which is HTML5.
<html> marks the start of the HTML document.
<head> contains meta-information about the HTML document, such as character encoding and viewport settings.
The <title> element sets the title of the webpage.
<body> contains the content of the HTML document.
Within the container div, there are three <p> elements representing the child elements to be evenly distributed.

CSS Code:

<style> /* Comment: Begins the CSS styling for the HTML document */
.evenly-distributed-children { /* Comment: Styles the container for evenly distributed children */
  display: flex; /* Comment: Displays the container as a flex container */
  justify-content: space-between; /* Comment: Distributes the child elements evenly along the main axis */
}
</style> /* Comment: End of the CSS styling */

Explanation:

.evenly-distributed-children selector targets the container div for evenly distributing children.
display: flex; property makes the container a flex container, allowing its child elements to be flex items.
justify-content: space-between; property evenly distributes the child elements along the main axis of the flex container, with extra space placed between them.

HTML-CSS Editor:

See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.