RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.w3resource.com/html-css-exercise/css-properties/order-answer.php below:

Website Navigation

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

CSS Properties: How to set the order of the flexible itemsLast update on February 23 2024 13:05:38 (UTC/GMT +8 hours)

Go to Exercise page

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

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4