একদিন, একটি ছোট্ট টেক্সট বক্স ছিল। সে খুব একা ছিল এবং তার চারপাশে অনেক জায়গা ছিল। সে তার বন্ধুদের আমন্ত্রণ জানাতে চেয়েছিল, কিন্তু তারা সবাই খুব ছোট ছিল এবং টেক্সট বক্সের মধ্যে সবুজ হত।

একদিন, একটি জাদুকর টেক্সট বক্সের কাছে এসে বললেন, "চিন্তা করবেন না, আমি আপনাকে সাহায্য করতে পারি। আমি আপনাকে একটি নতুন শৈলী দেব যা আপনাকে আপনার বন্ধুদের আমন্ত্রণ জানাতে দেবে। "

জাদুকর টেক্সট বক্সে কিছু জাদুকরী কবিতা পড়লেন এবং টেক্সট বক্স হঠাৎ করে একটি নতুন শৈলীতে পরিণত হল। এটি ছিল CSS Flexbox প্রপার্টি!

ফ্লেক্স বক্স তার বন্ধুদের আমন্ত্রণ জানাতে খুব খুশি ছিল। সে তাদেরকে তার চারপাশে সাজিয়ে রাখল এবং তারা সবাই খুব খুশি ছিল। তারা এখন খেলতে এবং গল্প বলতে পারত।

ফ্লেক্স বক্স এখন আর একা ছিল না। সে তার বন্ধুদের সাথে অনেক মজা করত।

CSS flexbox কী?

CSS flexbox হল একটি CSS প্রপার্টি যা আপনাকে একটি এক-মাত্রিক ক্রম (row বা column) তৈরি করতে দেয়। এটি আপনাকে আপনার উপাদানগুলিকে একটি নির্দিষ্ট ক্রম অনুসারে সাজানোর এবং সেগুলির মধ্যে কীভাবে জায়গা হবে তা নির্ধারণ করার ক্ষমতা দেয়।

CSS flexbox কীভাবে ব্যবহার করবেন?

CSS flexbox ব্যবহার করার জন্য, আপনাকে প্রথমে আপনার কাঙ্খিত উপাদানগুলিকে একটি ফ্লেক্স কন্টেইনারের মধ্যে রাখতে হবে। তারপরে, আপনি ফ্লেক্স কন্টেইনারের জন্য কিছু CSS প্রপার্টি সেট করতে হবে।

CSS flexbox এর কিছু গুরুত্বপূর্ণ প্রপার্টি:

display: flex: এই প্রপার্টি আপনার ফ্লেক্স কন্টেইনারের জন্য সেট করতে হবে যাতে এটি ফ্লেক্স মোডে চলে।
flex-direction: এই প্রপার্টি আপনাকে ফ্লেক্স কন্টেইনারের উপাদানগুলিকে একটি row বা column হিসাবে সাজানোর অনুমতি দেয়।
justify-content: এই প্রপার্টি আপনাকে ফ্লেক্স কন্টেইনারের উপাদানগুলিকে একটি নির্দিষ্ট ক্রম অনুসারে সাজানোর অনুমতি দেয়।
align-items: এই প্রপার্টি আপনাকে ফ্লেক্স কন্টেইনারের উপাদানগুলিকে একটি নির্দিষ্ট ক্রম অনুসারে সাজানোর অনুমতি দেয়।

CSS flexbox এর কিছু উদাহরণ:

আপনি একটি ফ্লেক্স কন্টেইনার তৈরি করতে পারেন এবং তার মধ্যে তিনটি টেক্সট বক্স রাখতে পারেন।

আপনি ফ্লেক্স কন্টেইনারের জন্য flex প্রপার্টি সেট করতে পারেন

display: flex

এবং flex-direction : row প্রপার্টি সেট করতে পারেন যাতে টেক্সট বক্সগুলি একটি সারিতে সাজানো হয়।

flex-direction: row

আপনি justify-content: space-between প্রপার্টি সেট করতে পারেন যাতে টেক্সট বক্সগুলি সমানভাবে সাজানো হয়।

justify-content: space-between

আপনি একটি ফ্লেক্স কন্টেইনার তৈরি করতে পারেন এবং তার মধ্যে একটি ছবি এবং একটি টেক্সট বক্স রাখতে পারেন। আপনি ফ্লেক্স কন্টেইনারের জন্য

display: flex

flex-direction প্রপার্টি সেট করতে পারেন যাতে ছবি এবং টেক্সট বক্সটি একটি কলামে সাজানো হয়।

flex-direction: column

আপনি align-items প্রপার্টি সেট করতে পারেন যাতে ছবি এবং টেক্সট বক্সটি কেন্দ্রে সাজানো হয়।

align-items: center

CSS flexbox একটি শক্তিশালী CSS প্রপার্টি যা আপনাকে আপনার ওয়েব পৃষ্ঠাগুলিতে সুন্দর এবং responsive layouts তৈরি করতে দেয়। এটি শিখতে সহজ এবং ব্যবহার করা সহজ।

না বুঝলে নিচের ভিডিও দেখুন:

https://www.youtube.com/shorts/Yy_aSXMJZ0Q