ফ্লেক্সবক্স হচ্ছে সিএসএস(৩) এর নতুন লেআউট। পেজ লেআউট যখন বিভিন্ন সাইজের স্ক্রিন এবং বিভিন্ন ডিভাইসে প্রদর্শিত হবে তখন এলিমেন্ট গুলোকে পূর্ব নির্ধারিত নকশা অনুযায়ী প্রদর্শন করানোর জন্য সিএসএস(৩) ফ্লেক্সবক্স ব্যবহার করা হয়।

ফ্লেক্স কন্টেইনার এবং ফ্লেক্স কন্টেন্ট নিয়ে গঠিত হয় ফ্লেক্সবক্স। একটি কন্টেইনারকে ফ্লেক্সে রূপান্তর করতে উক্ত এলিমেন্টের 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

ব্রাউজার সাপোর্ট