w3resource

HTML-CSS: Evenly distributed children

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 <!--License: https://bit.ly/3GjrtVF--> 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.


What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.