Format Code
Run Code
<!DOCTYPE html> <html> <head> <title>Let's Coding Example</title> </head> <style> .flex-grow { display: flex; background-color: lightgray; } .flex-grow-1 { flex-grow: 1; background-color: lightcoral; padding: 10px; margin: 5px; width: 100px; } .flex-grow-2 { flex-grow: 2; background-color: lightblue; padding: 10px; margin: 5px; width: 100px; } .flex-shrink { display: flex; background-color: lightgray; } .flex-shrink-1 { flex-shrink: 1; background-color: lightcoral; padding: 10px; margin: 5px; width: 200px; } .flex-shrink-2 { flex-shrink: 2; background-color: lightblue; padding: 10px; margin: 5px; width: 200px; } .flex-basis { display: flex; background-color: lightgray; } .flex-basis-100 { flex-basis: 100px; background-color: lightcoral; padding: 10px; margin: 5px; } .flex-basis-200 { flex-basis: 200px; background-color: lightblue; padding: 10px; margin: 5px; } </style> <body> <div class="flex-grow"> <div class="flex-grow-1">Grow 1</div> <div class="flex-grow-2">Grow 2</div> </div> <div class="flex-shrink"> <div class="flex-shrink-1">Shrink 1</div> <div class="flex-shrink-2">Shrink 2</div> </div> <div class="flex-basis"> <div class="flex-basis-100">Basis 100px</div> <div class="flex-basis-200">Basis 200px</div> </div> </body> </html>
console output