<!DOCTYPE html> <html> <head> <style> .flex-container1 { display: flex; flex-direction:row; background-color: DodgerBlue; } .flex-container2 { display: flex; flex-direction:column; background-color: red; } .flex-container3 { display: flex; flex-direction:row-reverse; background-color: tomato; } .flex-container4 { display: flex; flex-direction:column-reverse; background-color: green; } .flex-item { background-color: #f1f1f1; margin: 5px; padding: 10px; font-size: 15px; width:100px; } </style> </head> <body> <h2>Flex Direction Row</h2> <div class="flex-container1"> <div class="flex-item">A</div> <div class="flex-item">B</div> <div class="flex-item">C</div> </div> <h2>Flex Direction column</h2> <div class="flex-container2"> <div class="flex-item">A</div> <div class="flex-item">B</div> <div class="flex-item">C</div> </div> <h2>Flex Direction Row-reverse</h2> <div class="flex-container3"> <div class="flex-item">A</div> <div class="flex-item">B</div> <div class="flex-item">C</div> </div> <h2>Flex Direction Column-reverse</h2> <div class="flex-container4"> <div class="flex-item">A</div> <div class="flex-item">B</div> <div class="flex-item">C</div> </div> <p>Look how the display:flex; is getting used in parent container.</p> </body> </html>
