CSS Properties: How to align-content with JavaScript?

Last update on February 15 2024 06:20:21 (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-content with javascript syntax</title><!-- Title of the HTML page -->
<style>/* Begin CSS styling */

#xyz { 
  /* CSS rule for the element with id "xyz" */
  width: 200px; 
  /* Set the width of the element to 200 pixels */
  height: 400px; 
  /* Set the height of the element to 400 pixels */
  border: 1px solid #000000; 
  /* Add a 1 pixel solid border with color #000000 */
  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: 100px; 
  /* Set the width of the div elements to 100 pixels */
  height: 100px; 
  /* Set the height of the div elements to 100 pixels */
}
</style><!-- End of 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:#999900;"></div><!-- First nested div with background color -->
<div style="background-color:#CC0000;"></div><!-- Second nested div with background color -->
<div style="background-color:#3300FF;"></div><!-- Third nested div with background color -->
<div style="background-color:#CCFF00;"></div><!-- Fourth nested div with background color -->
<div style="background-color:#CC00FF;"></div><!-- Fifth nested div with background color -->
<div style="background-color:#9999FF;"></div><!-- Sixth nested div with background color -->
</div><!-- End of div with id "xyz" -->
<p>Click the "Try it" button to set the value of the alignContent property to "space-between"</p><!-- Instruction for user -->
<button onclick="w3r()">Try it</button><!-- Button to trigger the JavaScript function -->
<script><!-- Begin JavaScript code -->
function w3r() { 
  /* Define JavaScript function "w3r" */
  document.getElementById("xyz").style.WebkitAlignContent = "space-between"; // Code for Safari 7.0+
  /* Set align-content property to "space-between" for Safari */
  document.getElementById("xyz").style.alignContent = "space-between"; 
  /* Set align-content property to "space-between" for other browsers */
}
</script><!-- End of JavaScript code -->
</body><!-- End of document body -->
</html><!-- End of HTML document -->

Explanation:

The HTML code creates a flex container with the ID "xyz" and several child div elements.
CSS is used to style the flex container and its child divs, including setting the width, height, and border.
Flexbox properties are applied to align the child divs within the flex container using the align-content property.
JavaScript code is included to change the align-content property to "space-between" when the "Try it" button is clicked.
When the button is clicked, the JavaScript function w3r() is called, which sets the align-content property to "space-between" for both Safari and other browsers.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	No	No

Go to Exercise page