কম্পিউটার

CSS-এ ফ্লেক্স আইটেমগুলির মাত্রা নিয়ন্ত্রণ করা


CSS-এ ফ্লেক্স আইটেমগুলির মাত্রা নিয়ন্ত্রণ করতে, ফ্লেক্স সম্পত্তি ব্যবহার করুন। নিচের কোডটি ফ্লেক্স আইটেমগুলির মাত্রা নিয়ন্ত্রণ করে −

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
   display: flex;
   width: 100%;
}
div {
   width: 200px;
   height: 200px;
   color: white;
   text-align: center;
   font-size: 30px;
}
.first {
   background-color: rgb(55, 0, 255);
   flex: 2 1 auto;
}
.second {
   background-color: red;
}
.third {
   background-color: rgb(140, 0, 255);
}
</style>
</head>
<body>
<h1>Controlling flex items dimesions</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>

আউটপুট

উপরের কোডটি নিম্নলিখিত আউটপুট −

তৈরি করবে

CSS-এ ফ্লেক্স আইটেমগুলির মাত্রা নিয়ন্ত্রণ করা


  1. সিএসএস দিয়ে কন্টেইনারের শুরুতে ফ্লেক্স আইটেমগুলি সারিবদ্ধ করুন

  2. CSS দিয়ে অনুভূমিকভাবে ফ্লেক্স আইটেম সেট করুন

  3. CSS দিয়ে কন্টেইনারের কেন্দ্রে ফ্লেক্স আইটেমগুলি সারিবদ্ধ করুন

  4. CSS সহ কন্টেইনারের শুরুতে ফ্লেক্স লাইনগুলি প্রদর্শন করুন