ফ্লেক্সবক্স হচ্ছে সিএসএস(৩) এর নতুন লেআউট। পেজ লেআউট যখন বিভিন্ন সাইজের স্ক্রিন এবং বিভিন্ন ডিভাইসে প্রদর্শিত হবে তখন এলিমেন্ট গুলোকে পূর্ব নির্ধারিত নকশা অনুযায়ী প্রদর্শন করানোর জন্য সিএসএস(৩) ফ্লেক্সবক্স ব্যবহার করা হয়।
ফ্লেক্স কন্টেইনার এবং ফ্লেক্স কন্টেন্ট নিয়ে গঠিত হয় ফ্লেক্সবক্স। একটি কন্টেইনারকে ফ্লেক্সে রূপান্তর করতে উক্ত এলিমেন্টের display প্রোপার্টিতে ভ্যালু হিসেবে flex অথবা inline-flex সেট করতে হয়।
একটি ফ্লেক্স কন্টেইনারের মধ্যে এক বা একাধিক ফ্লেক্স কন্টেন্ট থাকতে পারে। ফ্লেক্স কন্টেন্ট ফ্লেক্স কন্টেইনারের ভিতরে লাইনে অবস্থান করে। ডিফল্ট ভাবে প্রতিটি ফ্লেক্স কনটেইনারে একটি করে লাইন থাকে।
নিম্নের উদাহরণে তিনটি ফ্লেক্স কন্টেন্ট দেখানো হল যেগুলোকে ডিফল্ট ভাবে অনুভূমিক আকারে লাইনে অর্থাৎ বাম থেকে ডান দিকে সাজবেঃ
kt_satt_skill_example_id=1840
আমরা direction প্রোপার্টি ব্যবহার করে ফ্লেক্সবক্সেরে গতিপথ পরিবর্তন করতে পারি। এখন আমরা যদি < /body> ট্যাগে direction প্রোপার্টির মান rtl সেট করি সেক্ষেত্রে ফ্লেক্সবক্সেরে গতিপথের সাথে সাথে সম্পূর্ণ পেজের লেআউটও পরিবর্তন হয়ে যাবে।
নিম্নের উদাহরণে দেখবো কিভাবে ফ্লেক্স এলিমেন্টের গতিপথ ডান থেকে বামে হয়ঃ
kt_satt_skill_example_id=1841
ফ্লেক্সবক্সের গতিপথ
ফ্লেক্স কন্টেইনারের মধ্যে ফ্লেক্স এলিমেন্ট গুলোর গতিপথ flex-direction প্রোপার্টি দ্বারা করে। আমরা flex-direction প্রোপার্টি ব্যবহার করে ফ্লেক্স এলিমেন্ট গতিপথ পরিবর্তন করতে পারি। নিম্নের এতে ব্যবহৃত ভ্যালু গুলো দেওয়া হলোঃ
row- টেক্সটের গতিমুখ যদি উপর থেকে নিচে হয় তবে ফ্লেক্সবক্সের গতিমুখ হবে বাম থেকে ডানে। এটি ডিফল্ট ভ্যালু।row-reverse- টেক্সটের গতিমুখ যদি বাম থেকে ডানে হয় তবে ফ্লেক্সবক্সের গতিমুখ হবে ডান থেকে বামে।column- টেক্সট যদি অনুভূমিক হয় তবে ফ্লেক্স হবে উলম্ব।column-reverse- এটিcolumnএর বিপরীত কাজ করে।
নিম্নের উদাহরণে আমরা row-reverse এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1842
নিম্নের উদাহরণে আমরা column এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1843
নিম্নের উদাহরণে আমরা column-reverse এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1844
justify-content প্রোপার্টি
আপনি justify-content প্রোপার্টি ব্যবহার করে একটি ফ্লেক্সিবল কন্টেইনারের সকল কন্টেন্ট গুলোকে অনুভূমিক ভাবে সাজাতে পারবেন।
justify-content এর সম্ভাব্য ভ্যালু গুলো নিচে দেওয়া হলোঃ
flex-start- ডিফল্টভাবে কন্টেন্ট গুলো কন্টেইনারের শুরুতে অবস্থান করেflex-end- কন্টেন্টগুলো কন্টেইনারের শেষে অবস্থান করেcenter- কন্টেন্টগুলো কন্টেইনারের কেন্দ্রে অবস্থান করেspace-between-কন্টেন্ট গুলো নিজেদের মধ্যে দূরত্ব বঝায় রেখে অবস্থান করেspace-around- কন্টেন্ট গুলো নিজেদের চারপাশে দূরত্ব বঝায় রেখে অবস্থান করে
নিম্নের উদাহরণে আমরা flex-end এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1845
নিম্নের উদাহরণে আমরা center এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1846
নিম্নের উদাহরণে আমরা space-between এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1847
নিম্নের উদাহরণে আমরা space-around এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1848
align-items প্রোপার্টি
আপনি align-items প্রোপার্টি ব্যবহার করে একটি ফ্লেক্সিবল কন্টেইনারের সকল কন্টেন্ট গুলোকে উলম্ব ভাবে সাজাতে পারবেন।
align-items এর সম্ভাব্য ভ্যালু গুলো নিচে দেওয়া হলোঃ
stretch- ডিফল্ট ভাবে কন্টেন্টগুলো সম্পূর্ন কন্টেইনার জুড়ে থাকে।flex-start- কন্টেন্ট গুলো কন্টেইনারের উপরে অবস্থান করে।flex-end- কন্টেন্ট গুলো কন্টেইনারের নিচে অবস্থান করে।center- কন্টেন্ট গুলো কন্টেইনারের কেন্দ্রে উলম্বভাবে অবস্থান করে।baseline- কন্টেন্টগুলো কন্টেইনারের বেসলাইনে অবস্থান করে।
নিম্নের উদাহরণে আমরা stretch এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1849
নিম্নের উদাহরণে আমরা flex-start এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1850
নিম্নের উদাহরণে আমরা flex-end এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1851
নিম্নের উদাহরণে আমরা center এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1852
নিম্নের উদাহরণে আমরা baseline এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1853
flex-wrap প্রোপার্টি
আপনি flex-wrap প্রোপার্টি ব্যবহার করে একটি ফ্লেক্সিবল কন্টেইনারের কন্টেন্ট গুলো wrap হবে কিনা তা নির্দেশ করতে পারেন।
flex-wrap এর সম্ভাব্য ভ্যালু গুলো নিচে দেওয়া হলোঃ
nowrap- ডিফল্টভাবে ফ্লেক্স কন্টেন্ট গুলোwrapকরা থাকে না।wrap- যখন প্রয়োজন তখন ফ্লেক্স কন্টেন্ট গুলোwrapকরে।wrap-reverse- যখন প্রয়োজন তখন ফ্লেক্স কন্টেন্ট গুলোকে বিপরিত দিক থেকেwrapকরে।
নিম্নের উদাহরণে আমরা nowrap এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1854
নিম্নের উদাহরণে আমরা wrap এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1855
নিম্নের উদাহরণে আমরা wrap-reverse এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1856
align-content প্রোপার্টি
আপনি align-content প্রোপার্টি ব্যবহার করে flex-wrap প্রোপার্টিকে মোডিফাই করতে পারেন। align-content প্রোপার্টি অনেকটা align-items প্রোপার্টির মত কাজ করে। তবে এক্ষেত্রে এটি ফ্লেক্স কন্টেন্টের পরিবর্তে ফ্লেক্স লাইনকে সাজায়।
align-content এর সম্ভাব্য ভ্যালু গুলো নিচে দেওয়া হলোঃ
stretch- ডিফল্টভাবে লাইন গুলো কন্টেইনারের খালি অংশ জুড়ে থাকে।flex-start- লাইন গুলো কন্টেইনারের শুরুতে থাকে।flex-end- লাইন গুলো কন্টেইনারের শেষে থাকে।center- লাইন গুলো কন্টেইনারের কেন্দ্রে থাকে।space-between- কন্টেইনারের লাইন গুলো জোড়া জোড়া করে থাকে।
নিম্নের উদাহরণে আমরা center এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1857
ফ্লেক্স কন্টেন্ট প্রোপার্টি
আপনি order প্রোপার্টি ব্যবহার করে কন্টেইনারের ভিতর ফ্লেক্স কন্টেন্ট গুলোর অবস্থান পরিবর্তন করতে পারেনঃ
kt_satt_skill_example_id=1858
আপনি margin: auto; সেট করে অতিরিক্ত জায়গা নেওয়ার মাধ্যমে কন্টেইনারের ভিতর ফ্লেক্স কন্টেন্ট গুলোর অবস্থান পরিবর্তন করতে পারেনঃ
kt_satt_skill_example_id=1859
আপনি margin: auto; ব্যবহার করে কন্টেইনারের ভিতর ফ্লেক্স কন্টেন্টকে যথাযথভাবে কেন্দ্রে অবস্থান করাতে পারেনঃ
kt_satt_skill_example_id=1860
আপনি flex প্রোপার্টি ব্যবহার করে কন্টেইনারের ভিতর ফ্লেক্স কন্টেন্ট গুলোর দৈঘ্য এবং প্রস্থ পরিবর্তন করতে পারেনঃ
kt_satt_skill_example_id=1861
ব্রাউজার সাপোর্ট
Read more
