ফ্লেক্স কন্টেইনারে `flex-wrap: wrap` ব্যবহার করলে ফ্লেক্স আইটেমগুলো জায়গা না পেলে পরবর্তী সারিয়ে চলে যায়।
উদাহরণ: Flex Wrap
<!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 উদাহরণ</h1>
<div class="container">
<div class="first">প্রথম ডিভ</div>
<div class="second">দ্বিতীয় ডিভ</div>
<div class="third">তৃতীয় ডিভ</div>
</div>
</body>
</html>
কোড ব্যাখ্যা
- display: flex: ফ্লেক্স কন্টেইনার।
- flex-wrap: wrap: আইটেমগুলো এক সারিতে না পেলে পরবর্তী সারিয়ে যাবে।
- width: 150px (আইটেম): তিনটি আইটেম = ৪৫০px, কন্টেইনার ৩০০px — তাই র্যাপ হবে।
flex-wrap মানগুলো
- nowrap (ডিফল্ট): সব আইটেম এক সারিতে থাকবে (ওভারফ্লো করবে)।
- wrap: একাধিক সারি তৈরি করবে।
- wrap-reverse: উল্টা দিক থেকে র্যাপ করবে।
