Specify the order of a flexible item relative to the rest of the flex items inside the same container with CSS

CSS Web Development Front End Technology

Use the order property to specify the order of a flexible item relative to the rest of the flex items inside the same container.

Example

You can try to run the following code to implement the order property −

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            background-color: orange;
            align-content: space-between;
            height: 150px;
            width: 600px;
            flex-wrap: wrap;
         }
         .mycontainer > div {
            background-color: white;
            text-align: center;
            line-height: 40px;
            font-size: 25px;
            width: 100px;
            margin: 5px;
         }
      </style>
   </head>
   <body>
      <h1>Quiz</h1>
      <div class = "mycontainer">
         <div style = "order: 8">Q1</div>
         <div style = "order: 6">Q2</div>
         <div style = "order: 2">Q3</div>
         <div style = "order: 1">Q4</div>
         <div style = "order: 7">Q5</div>
         <div style = "order: 4">Q6</div>
         <div style = "order: 3">Q7</div>
         <div style = "order: 5">Q8</div>
      </div>
   </body>
</html>

Daniol Thomas

Updated on: 03-Jul-2020

99 Views

Kickstart Your Career

Get certified by completing the course

Get Started