CSS Properties: How to make the flexible items display in reverse order, and wrap if necesarry?

Last update on February 22 2024 12:45:33 (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 the flexible items display in reverse order, and wrap if necessary</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
#w3r { /* Targets an element with the id "w3r" */
  width: 150px; /* Sets the width of the element to 150 pixels */
  height: 200px; /* Sets the height of the element to 200 pixels */
  border: 1px solid #FF00FF; /* Sets a border around the element with color #FF00FF */
  display: -webkit-flex; /* Sets the display property to flex for WebKit browsers */
  -webkit-flex-flow: row-reverse wrap; /* Sets the direction of the flexible items inside the element to row-reverse and allows wrapping for WebKit browsers */
  display: flex; /* Sets the display property to flex */
  flex-flow: row-reverse wrap; /* Sets the direction of the flexible items inside the element to row-reverse and allows wrapping */
}
#w3r div { /* Targets the div elements inside the element with id "w3r" */
  width: 50px; /* Sets the width of the div elements to 50 pixels */
  height: 50px; /* Sets the height of the div elements to 50 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 make flexible items display in reverse order and wrap if necessary 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 and wrap if necessary.
Each div element inside the container is given a width and height of 50 pixels to form squares.
This setup demonstrates how the flex-flow property can be used to control the direction and wrapping behavior of flexible items within a flex container.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page