Post📚 FLEX WRAP & GAP

📚 FLEX WRAP & GAP 🔹 FLEX WRAP By default, flex items will try to fit onto one single line. If there are too many items, they will shrink or overflow. flex-wrap: wrap allows items to move to a new line if they run out of space. 🔹 GAP The gap property is the easiest way to add space between flex items without using margins. It works for both rows and columns. 💻 CODE <html> <head> <title>Flex Wrap & Gap</title> <style> .gallery { display: flex; flex-wrap: wrap; gap: 20px; padding: 20px; background: #f7fafc; border: 1px solid #e2e8f0; border-radius: 15px; } .photo { width: 120px; height: 120px; background: #fbbf24; display: flex; align-items: center; justify-content: center; font-weight: bold; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); } </style> </head> <body> <h1>Flex Wrap & Gap</h1> <div class="gallery"> <div class="photo">1</div> <div class="photo">2</div> <div class="photo">3</div> <div class="photo">4</div> <div class="photo">5</div> <div class="photo">6</div> </div> </body> </html> 🎯 TRY IT YOURSELF 👉 Copy the code 👉 Open it in your HTML file 👉 Change gap: 20px; to gap: 5px;, gap: 30px;, etc. 👉 See how the space between the items changes. 🚀 KEEP LEARNING • KEEP CODING • KEEP BUILDING @AbWebDeveloper 💚💛❤️@AbWebDeveloper