CSS Properties: How to make some space around the items of the flexible division element?

Last update on February 23 2024 13:05:03 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html><!-- Begins the HTML document -->
<head><!-- Contains metadata and links to external resources -->
<title>How to make some space around the items of the flexible division element</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
#w3r { /* Selects the element with id "w3r" */
  width: 400px; /* Sets the width of the element to 400 pixels */
  height: 150px; /* Sets the height of the element to 150 pixels */
  border: 1px solid #CC00CC; /* Sets the border of the element to a 1 pixel solid line with color #CC00CC */
  display: -webkit-flex;  /* Sets the display property of the element for WebKit browsers to enable flexbox layout */
  -webkit-justify-content: space-around; /* Aligns flex items evenly along the main axis with equal space around them for WebKit browsers */
  display: flex; /* Sets the display property of the element to enable flexbox layout */
  justify-content: space-around; /* Aligns flex items evenly along the main axis with equal space around them */
}
#w3r div { /* Selects all div elements inside the element with id "w3r" */
  width: 70px; /* Sets the width of the div elements to 70 pixels */
  height: 70px; /* Sets the height of the div elements to 70 pixels */
}
</style><!-- Ends CSS styling -->
</head>
<body>
<p><strong>w3resource Tutorial</strong></p><!-- Paragraph element with strong (bold) text -->
<div id="w3r"><!-- Division element with id "w3r" -->
<div style="background-color:#0000CC;">HTML5</div><!-- First div element with inline style and text "HTML5" -->
<div style="background-color:#00CC00;">PHP</div><!-- Second div element with inline style and text "PHP" -->
<div style="background-color:#FF0000;">SQL</div><!-- Third div element with inline style and text "SQL" -->
<div style="background-color:#FF00FF;">MySQL</div><!-- Fourth div element with inline style and text "MySQL" -->
</div><!-- End of division element with id "w3r" -->
</body>
</html><!-- Ends the HTML document -->

Explanation:

This HTML document demonstrates how to use flexbox to evenly distribute space around flex items inside a flexible division element.
CSS comments are added to explain each section of the code.
The #w3r selector sets the styling for the container element with id "w3r", including its width, height, border, and flexbox properties to distribute space around flex items.
The #w3r div selector sets the styling for the div elements inside the container, including their width and height.
Four div elements are included inside the container, each with its background color and text content. The flexbox layout distributes space around these div elements evenly.

Live Demo:

See the Pen justify-content-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page