CSS Properties: How to set the order of the flexible items

Last update on February 23 2024 13:04:54 (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 order of the flexible items</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
#w3r { /* Styles the element with the id "w3r" */
    width: 300px; /* Sets the width of the element */
    height: 150px; /* Sets the height of the element */
    border: 1px solid #CC63FF; /* Sets the border of the element */
    display: -webkit-flex; /* Displays the element as a flexible box for webkit browsers */
    display: flex; /* Displays the element as a flexible box */
} /* Ends the styling for #w3r */

#w3r div { /* Styles div elements within the element with the id "w3r" */
    width: 70px; /* Sets the width of the div elements */
    height: 70px; /* Sets the height of the div elements */
} /* Ends the styling for #w3r div */

div#myblue   {order: 2;} /* Sets the order of the div with id "myblue" */
div#mysky  {order: 4;} /* Sets the order of the div with id "mysky" */
div#mygreen {order: 3;} /* Sets the order of the div with id "mygreen" */
div#myred  {order: 1;} /* Sets the order of the div with id "myred" */
</style><!-- Ends CSS styling -->
</head><!-- Ends the head section -->
<body><!-- Begins the body of the document -->
<p>w3resource Tutorial</p><!-- Paragraph element with text content -->
<div id="w3r"><!-- Div element with the id "w3r" -->
<div id="myblue" style="background-color:#3333FF;">HTML5</div><!-- Div element with id "myblue" -->
<div id="mysky" style="background-color:#66FFFF;">CSS3</div><!-- Div element with id "mysky" -->
<div id="mygreen" style="background-color:#339933;">JavaScript</div><!-- Div element with id "mygreen" -->
<div id="myred" style="background-color:#FF0000;">PHP</div><!-- Div element with id "myred" -->
</div><!-- Ends the div with id "w3r" -->
</body><!-- Ends the body section -->
</html><!-- Ends the HTML document -->

Explanation:

This HTML document demonstrates how to set the order of flexible items using CSS.
CSS comments are added to explain each section of the code.
The div elements within the container with the id "w3r" are displayed as flexible items.
Each div element is styled with a specific width and height.
The order of the flexible items is defined using the "order" property.
The div elements with ids "myblue", "mysky", "mygreen", and "myred" are assigned specific orders to control their positions within the container.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page