CSS3 एक लेआउट मोड फ्लेक्सिबल बॉक्स प्रदान करता है, जिसे आमतौर पर फ्लेक्सबॉक्स कहा जाता है। फ्लेक्सबॉक्स (फ्लेक्सिबल बॉक्स) CSS3 का एक लेआउट मोड है। इस मोड का उपयोग करके, आप जटिल एप्लिकेशन्स और वेब पेजेज़ के लिए आसानी से लेआउट बना सकते हैं। इसमें कंटेनर, फ्लेक्स आइटम्स आदि शामिल हैं। कंटेनर में निम्न प्रॉपर्टीज़ होती हैं -
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
CSS3 का उपयोग करके फ्लेक्सिबल लेआउट्स प्रदर्शित करने वाला कोड निम्न है -
उदाहरण
<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .container { display: flex; flex-wrap: wrap; justify-content: space-evenly; background-color: lightblue; } .container1 { align-self: flex-start; display: flex; background-color: rgb(71, 30, 255); width: 200px; margin: 20px; } .container1 > div, .container2 > div, .container3 > div, .container4 > div { background-color: #f1f1f1; margin: 10px; padding: 10px; font-size: 30px; } .container2 { display: flex; background-color: rgb(14, 126, 79); width: 200px; justify-content: center; align-self: flex-start; margin: 20px; } .container3 { display: flex; flex-direction: column; background-color: rgb(168, 60, 10); width: 200px; align-items: center; margin: 20px; } .container4 { background-color: rgb(26, 10, 168); width: 200px; margin: 20px; } </style> </head> <body> <h1>Flex layout example</h1> <div class="container"> <div class="container1"> <div>1</div> <div>2</div> <div>3</div> </div> <div class="container2"> <div>1</div> <div>2</div> <div>3</div> </div> <div class="container3"> <div>1</div> <div>2</div> <div>3</div> </div> <div class="container4"> <div>1</div> <div>2</div> <div>3</div> </div> </div> </body> </html>आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
