CSS3 একটি লেআউট মোড নমনীয় বক্স প্রদান করে, যাকে সাধারণত ফ্লেক্সবক্স বলা হয়। ফ্লেক্সবক্স (নমনীয় বক্স) হল CSS3 এর একটি লেআউট মোড। এই মোড ব্যবহার করে, আপনি সহজেই জটিল অ্যাপ্লিকেশন এবং ওয়েব পৃষ্ঠাগুলির জন্য লেআউট তৈরি করতে পারেন৷ এতে ধারক, ফ্লেক্স আইটেম ইত্যাদি অন্তর্ভুক্ত রয়েছে। ধারকটির নিম্নলিখিত বৈশিষ্ট্য রয়েছে −
-
ফ্লেক্স-ডিরেকশন
-
flex-wrap
-
ফ্লেক্স-ফ্লো
-
ন্যায্যতা-সামগ্রী
-
সারিবদ্ধ আইটেমগুলি
-
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> আউটপুট
উপরের কোডটি নিম্নলিখিত আউটপুট −
তৈরি করবে
