Flex Order Property in CSS: How to Control the Order of Flex Items

Flex Order is a CSS property that allows you to change the order of flex items within a flex container. By default, flex items are displayed in the order they appear in the source code. However, with Flex Order, you can rearrange the order of the items without changing their position in the source code.

The Flex Order property takes a numeric value that determines the order in which the flex items are displayed. The default order value is 0, but you can use positive or negative integers to control the order.

For example, if you have a flex container with four flex items and you want to display the third item first, you can set the Flex Order property of the third item to 1, and set the Flex Order property of the other items to higher values, such as 2, 3, and 4. This will change the order of the items in the display without changing their position in the source code.

Flex Order is a powerful tool for controlling the layout of flex items in a flexible and responsive way. By changing the order of the items, you can create different visual effects and optimize the display for different screen sizes and devices. It is important to note that Flex Order only affects the display order, and does not affect the size, position, or spacing of the flex items.

Here is an example of how to use the flex order property in CSS:

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="order.css">
</head>
<body>
  <div class="container">
    <div class="flex-item box-1">Box-1</div>
    <div class="flex-item box-2">Box-2</div>
    <div class="flex-item box-3">Box-3</div>
    <div class="flex-item box-4">Box-4</div>
    <div class="flex-item box-5">Box-5</div>
    <div class="flex-item box-6">Box-6</div>
    <div class="flex-item box-7">Box-7</div>
    <div class="flex-item box-8">Box-8</div>
    <div class="flex-item box-9">Box-9</div>
  </div>
</body>
</html>

This code is an example of using Flex Order in CSS to control the order of flex items in a flex container. The code starts with importing the Rubik font from Google Fonts and setting some basic styling for all elements on the page, including setting the font family to 'Rubik'.

The code then defines a container element with a black border and several flex items with different background colors. Each flex item has white text with a font size of 18px and is centered horizontally and vertically with padding.

order.css :

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;900&display=swap');

*{
  margin: 0;
  padding: 0;
  font-family: 'Rubik', sans-serif;

}

.container{
  border:5px solid black;
}

.flex-item{
  color:white;
  font-size: 18px;
  padding: 16px;
  text-align: center;
}

.box-1{background-color: #1abc9c;}
.box-2{background-color:#3498db;}
.box-3{background-color: #2ecc71;}
.box-4{background-color: #9b59b6;}
.box-5{background-color:#34495e;}
.box-6{background-color:#2980b9;}
.box-7{background-color:#e74c3c;}
.box-8{background-color: #d35400;}
.box-9{background-color:#2c3e50;}

/*-----------------------------------*/

.container{
  display: flex;
 
}

.box-1{order: 4;}
.box-2{order: 1;}
.box-3{order: 2;}
.box-4{order: 1;}
.box-5{order: 3;}

The container element has the CSS property "display: flex", which sets it as a flex container. This means that its child elements (the flex items) will become flex items and will be laid out using flexbox layout.

The Flex Order property is used to control the order of the flex items. In this example, the first box has an order of 4, so it will be displayed fourth in the container. The second box has an order of 1, so it will be displayed first. The third box has an order of 2, so it will be displayed second. The fourth box has an order of 1, so it will also be displayed first (this means that it will be displayed before the third box, since the order property is the same). The fifth box has an order of 3, so it will be displayed third.

By changing the order of the flex items, you can change the visual layout of the container without changing the position of the items in the source code. This makes it easy to create flexible and responsive layouts that adapt to different screen sizes and devices.