Flexbox-এর justify-content প্রপার্টি দিয়ে আমরা Flex Items-এর মধ্যে স্থান (space) বিতরণ করতে পারি। এর মধ্যে একটি গুরুত্বপূর্ণ মান হলো space-evenly, যা Flex Items-এর মধ্যে সমানভাবে স্থান বিতরণ করে।
space-evenly কী?
space-evenly মানটি Flex Container-এর মধ্যে থাকা Flex Items-এর মধ্যে সমানভাবে স্থান বিতরণ করে, এমনকি প্রথম এবং শেষ আইটেমের সাথে কন্টেইনারের প্রান্ত (edge) এর মধ্যেও সমান দূরত্ব থাকে।
ব্যবহার:
- এটি কিভাবে কাজ করে?
justify-content: space-evenly;ব্যবহার করলে Flex Items-এর মধ্যে সমান পরিমাণ জায়গা (space) তৈরী হয়, এবং কন্টেইনারের দুই প্রান্তের (left এবং right) মধ্যে সুনির্দিষ্ট পরিমাণ ফাঁকা জায়গা থাকে।
উদাহরণ: space-evenly ব্যবহার
HTML:
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
CSS:
.flex-container {
display: flex;
justify-content: space-evenly; /* Flex Items-এর মধ্যে সমান জায়গা বিতরণ */
background-color: lightgray;
padding: 10px;
}
.flex-item {
background-color: teal;
color: white;
padding: 20px;
text-align: center;
width: 100px;
}
আউটপুট:
এই উদাহরণে, justify-content: space-evenly; ব্যবহারের ফলে Flex Items-এর মধ্যে সমানভাবে জায়গা বিতরণ হবে এবং প্রথম ও শেষ আইটেমের সাথে কন্টেইনারের প্রান্তের মধ্যে সমান ফাঁকা জায়গা থাকবে।
space-evenly এবং অন্যান্য justify-content মানের মধ্যে পার্থক্য:
| justify-content মান | বর্ণনা |
|---|---|
flex-start | Flex Itemsগুলো কন্টেইনারের শুরুতে (বাম দিকে) সজ্জিত হবে। |
flex-end | Flex Itemsগুলো কন্টেইনারের শেষ দিকে (ডান দিকে) সজ্জিত হবে। |
center | Flex Itemsগুলো কন্টেইনারের কেন্দ্রভাগে সজ্জিত হবে। |
space-between | Flex Items-এর মধ্যে সমান দূরত্ব থাকবে, তবে প্রথম এবং শেষ আইটেম কন্টেইনারের প্রান্তে থাকবে। |
space-around | Flex Items-এর মধ্যে সমান দূরত্ব থাকবে, তবে প্রথম এবং শেষ আইটেমের প্রান্তের সাথে কিছু জায়গা থাকবে। |
space-evenly | Flex Items-এর মধ্যে সমানভাবে স্থান বিতরণ হবে এবং কন্টেইনারের প্রান্তের সাথে সমান জায়গা থাকবে। |
space-evenly ব্যবহারের প্রয়োজনীয়তা
- নমনীয় লেআউট ডিজাইন:
space-evenlyব্যবহার করে উপাদানগুলোর মধ্যে সমান দূরত্ব সৃষ্টি করা যায়, যা ডিজাইনকে পরিষ্কার এবং সুসঙ্গত দেখায়। - রেস্পন্সিভ ডিজাইন:
রেস্পন্সিভ ওয়েব ডিজাইনে Flex Items-এর মধ্যে সমান স্থান বজায় রাখা প্রয়োজন হলেspace-evenlyখুবই কার্যকরী। - কনটেইনারের প্রান্তে সমান জায়গা:
এটি কন্টেইনারের প্রান্তের সাথে সমান ফাঁকা জায়গা রাখতে সাহায্য করে, যা আইটেমগুলোর মধ্যে ভারসাম্যপূর্ণ স্থান তৈরি করে।
সারাংশ
space-evenly হচ্ছে Flexbox-এর একটি শক্তিশালী টুল, যা Flex Items-এর মধ্যে সমানভাবে স্থান বিতরণ করে, এমনকি কন্টেইনারের প্রান্তের সাথে সুনির্দিষ্ট জায়গা রাখে। এটি ওয়েব ডিজাইনকে আরও সুসংগত এবং ভারসাম্যপূর্ণ করতে সাহায্য করে, বিশেষ করে রেস্পন্সিভ লেআউট এবং ইউজার ইন্টারফেস ডিজাইনে।
Read more
