RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.w3resource.com/html-css-exercise/css-properties/justify-content-answer.php below:

Website Navigation

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

CSS Properties: How to make some space around the items of the flexible division element?Last update on February 23 2024 13:05:49 (UTC/GMT +8 hours)

Go to Exercise page

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

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4