CSS3 का उपयोग करके फ्लेक्स आइटम की रैपिंग को सक्षम करने के लिए, फ्लेक्स-रैप प्रॉपर्टी का उपयोग किया जाता है। रैपिंग सक्षम करने के लिए वैल्यू रैप सेट करें।
CSS3 का उपयोग करके फ्लेक्स आइटम के रैपिंग को सक्षम करने के लिए कोड निम्नलिखित है -
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
height: 300px;
display: flex;
width: 300px;
border: 2px solid red;
flex-wrap: wrap;
}
div {
width: 150px;
height: 100px;
color: white;
text-align: center;
font-size: 20px;
}
.first {
background-color: rgb(55, 0, 255);
}
.second {
background-color: red;
}
.third {
background-color: rgb(140, 0, 255);
}
</style>
</head>
<body>
<h1>Flex wrap example</h1>
<div class="container">
<div class="first">First Div</div>
<div class="second">Second Div</div>
<div class="third">Third Div</div>
</div>
</body>
</html> आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -