CSS Properties: How to align the items of the flexible element?

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

Solution:

HTML Code:

<!DOCTYPE html><!-- Define document type as HTML -->
<html><!-- Begin HTML document -->
<head><!-- Start of document header -->
<title>How to align the items of the flexible element</title><!-- Title of the HTML page -->
<style>/*-- Begin CSS styling */
#xyz { 
  /* CSS rule for the element with id "xyz" */
  width: 80px; 
  /* Set the width of the element to 80 pixels */
  height: 250px; 
  /* Set the height of the element to 250 pixels */
  border: 1px solid #3300FF; 
  /* Add a 1 pixel solid border with color #3300FF */
  display: -webkit-flex; /* Safari */
  /* Use flexbox layout for Safari browsers */
  -webkit-flex-flow: row wrap; /* Safari 6.1+ */
  /* Set flex direction to row and allow wrapping for Safari */
  -webkit-align-content: space-around; /* Safari 7.0+ */
  /* Align content evenly with space around for Safari */
  display: flex; 
  /* Use flexbox layout for other browsers */
  flex-flow: row wrap; 
  /* Set flex direction to row and allow wrapping for other browsers */
  align-content: space-around; 
  /* Align content evenly with space around for other browsers */
}
#xyz div { 
  /* CSS rule for div elements inside the element with id "xyz" */
  width: 80px; 
  /* Set the width of the div elements to 80 pixels */
  height: 80px; 
  /* Set the height of the div elements to 80 pixels */
}
</style><!-- End 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:#CCCC66;"></div><!-- First nested div with background color -->
<div style="background-color:#CC66CC;"></div><!-- Second nested div with background color -->
<div style="background-color:#FF99CC;"></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 defines a flex container with the ID "xyz".
CSS is used to style the flex container and its child div elements.
Flexbox properties are applied to align the child divs within the flex container.
The flex container is set to wrap its contents and evenly distribute the space around the items both for Safari and other browsers.
Each child div inside the flex container has a width and height of 80 pixels.
The background color of each child div is set using inline CSS.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	No	No

Go to Exercise page