CSS Properties: How to set the direction of the flexible items inside the division element in reverse order?

Last update on February 22 2024 12:45:35 (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 set the direction of the flexible items inside the division element in reverse order</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
#w3r { /* Targets an element with the id "w3r" */
  width: 400px; /* Sets the width of the element to 400 pixels */
  height: 400px; /* Sets the height of the element to 400 pixels */
  border: 1px solid #c3c3c3; /* Sets a border around the element with color #c3c3c3 */
  display: -webkit-flex; /* Sets the display property to flex for WebKit browsers */
  -webkit-flex-direction: row-reverse; /* Sets the direction of the flexible items inside the element to row-reverse for WebKit browsers */
  display: flex; /* Sets the display property to flex */
  flex-direction: row-reverse; /* Sets the direction of the flexible items inside the element to row-reverse */
}
#w3r div { /* Targets the div elements inside the element with id "w3r" */
  width: 60px; /* Sets the width of the div elements to 60 pixels */
  height: 60px; /* Sets the height of the div elements to 60 pixels */
}
</style>
</head>
<body>
<p><strong>w3resource Tutorial</strong></p><!-- Paragraph element with strong (bold) text -->
<div id="w3r"><!-- Div element with id "w3r" -->
<div style="background-color:#00FF00;">HTML5</div><!-- Div element with background color and text "HTML5" -->
<div style="background-color:#3333FF;">CSS</div><!-- Div element with background color and text "CSS" -->
<div style="background-color:#FF6600;">PHP</div><!-- Div element with background color and text "PHP" -->
<div style="background-color:#FF3399;">SQL</div><!-- Div element with background color and text "SQL" -->
<div style="background-color:#FFCC33;">MYSQL</div><!-- Div element with background color and text "MYSQL" -->
</body>
</html><!-- Ends the HTML document -->

Explanation:

This HTML document demonstrates how to set the direction of the flexible items inside a division element in reverse order using CSS.
Comments are added to both HTML and CSS to explain each section of the code.
The CSS <style> block sets up flexbox layout for the container with id "w3r" and its child div elements.
The container with id "w3r" is given specific width, height, and border properties, and its flexible items are set to be displayed in a row in reverse order.
Each div element inside the container is given a width and height of 60 pixels to form squares, but the direction of display is reversed, so the order of appearance is reversed compared to normal row display.

Live Demo:

See the Pen flex-direction-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page