Format Code
Run Code
<!DOCTYPE html> <html> <head> <title>Let's Coding Example</title> </head> <style> .flex-wrap { display: flex; flex-wrap: wrap; background-color: lightgray; } .flex-wrap-reverse { display: flex; flex-wrap: wrap-reverse; background-color: lightgray; } .flex-item { background-color: lightcoral; padding: 10px; margin: 5px; width: 100px; } </style> <body> <div class="flex-wrap"> <div class="flex-item">Item 1</div> <div class="flex-item">Item 2</div> <div class="flex-item">Item 3</div> <div class="flex-item">Item 4</div> <div class="flex-item">Item 5</div> <div class="flex-item">Item 6</div> <div class="flex-item">Item 7</div> <div class="flex-item">Item 8</div> <div class="flex-item">Item 9</div> <div class="flex-item">Item 10</div> <div class="flex-item">Item 11</div> </div> <hr class="my-3"> <div class="flex-wrap-reverse"> <div class="flex-item">Item 1</div> <div class="flex-item">Item 2</div> <div class="flex-item">Item 3</div> <div class="flex-item">Item 4</div> <div class="flex-item">Item 5</div> <div class="flex-item">Item 6</div> <div class="flex-item">Item 7</div> <div class="flex-item">Item 8</div> </div> </body> </html>
console output