HTML Compiler Online
Javascript Online Compiler
index.html
Change Theme
Compress code
Format code
Download Code
Clear Code
Copy Code!
Run
ctrl+s or click
Output
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS - flexbox order</title> <style> .container { display: flex; border: 2px solid #bd1e60; margin: 20px 0; } #target1 { order: 0; background-color: #bd1e60; } #target2 { order: 1; background-color: #bd1e60; } #target3 { order: -1; background-color: #bd1e60; } #target4 { order: 5; background-color: #bd1e60; } .container div { margin: 6px; color: white; font-size: 18px; font-family: sans-serif; padding: 10px 15px; border-radius: 5px; background-color: rgb(39, 170, 164); } </style> </head> <body> <h2>order: Integer_value</h2> <p>order property orders the container's item according to their order value in ascending order.</p> <div class="container"> <div>1 <sub>order:0</sub></div> <div>2 <sub>order:0</sub></div> <div id="target1">3 <sup>(Target element)</sup><sub>order:0</sub></div> <div>4 <sub>order:0</sub></div> <div>5 <sub>order:0</sub></div> </div> <div class="container"> <div>1 <sub>order:0</sub></div> <div>2 <sub>order:0</sub></div> <div id="target2">3 <sup>(Target element)</sup><sub>order:1</sub></div> <div>4 <sub>order:0</sub></div> <div>5 <sub>order:0</sub></div> </div> <div class="container"> <div>1 <sub>order:0</sub></div> <div>2 <sub>order:0</sub></div> <div id="target3">3 <sup>(Target element)</sup><sub>order:-1</sub></div> <div>4 <sub>order:0</sub></div> <div>5 <sub>order:0</sub></div> </div> <div class="container"> <div style="order:15;background:#4bc505">1 <sub>order:15</sub></div> <div style="order:3;background:#ad6903">2 <sub>order:3</sub></div> <div id="target4">3 <sup>(Target element)</sup><sub>order:5</sub></div> <div style="order:4;background:#cccf1d">4 <sub>order:4</sub></div> <div>5 <sub>order:0</sub></div> </div> </body> </html>
Run
