Format Code
Run Code
<!DOCTYPE html> <html> <head> <title>Let's Coding Example</title> </head> <style> .flex-direction-row { display: flex; flex-direction: row; background-color: lightgray; } .flex-direction-column { display: flex; flex-direction: column; background-color: lightgray; } .flex-item { background-color: lightcoral; padding: 10px; margin: 5px; width: 100px; } </style> <body> <div class="flex-direction-row"> <div class="flex-item">Row Item 1</div> <div class="flex-item">Row Item 2</div> <div class="flex-item">Row Item 3</div> </div> <div class="flex-direction-column"> <div class="flex-item">Column Item 1</div> <div class="flex-item">Column Item 2</div> <div class="flex-item">Column Item 3</div> </div> </body> </html>
console output