সিএসএস ফ্লেক্সবক্স
ফ্লেক্সবক্স লেআউট অথবা ফ্লেক্সিবল বক্স মডিউল এর উদ্দেশ্য হচ্ছে একটা কন্টেইনারে থাকা আইটেমগুলোর মধ্যে স্পেস, অ্যালাইনমেন্ট , লেআউট প্রতিস্থাপনসহ আরো কিছু ব্যাপার ঠিক করা। ফ্লেক্সবক্সের সাহায্যে সাইজ জানা নেই অথবা ডায়নামিক সাইজের ইলিমেন্টও হ্যান্ডেল করা যায় খুব সহজেই।
কন্ট্রিবিউটর
ফ্লেক্সবক্স অ্যাপ্লাই করা হয় সিএসএস প্রপার্টি display দিয়ে
display: flex;যে ইলিমেন্ট এর display তে flex প্রপার্টি অ্যাপ্লাই করা হয় সেটা ফ্লেক্স কন্টেইনার। কন্টেইনারে অ্যাপ্লাই করা যাবে এমন সিএসএস প্রপার্টিগুলো কন্টেইনার দিয়ে চিহ্নিত করা হয়েছে
কন্টেইনারকন্টেইনারের ভিতরের চিলড্রেন ইলিমেন্টকে ফ্লেক্স আইটেম হিসেবে ধরা হয়। চিলড্রেনে অ্যাপ্লাই করা যাবে এমন সিএসএস প্রপার্টিগুলো চিলড্রেন দিয়ে চিহ্নিত করা হয়েছে
চিলড্রেনএকটা ফ্লেক্স কন্টেইনারের প্রধান অক্ষ হচ্ছে এর আইটেমগুলো যে বরাবর থাকবে। এটা যে সবসময়েই হরিজন্টাল হবে তাও কিন্তু নয়। এটা ডিপেন্ড করবে flex-direction প্রপার্টির উপর
প্রধান অক্ষঅপর অক্ষকে ক্রস অক্ষ বলে। প্রধান অক্ষ বের করতে পারলে ক্রস অক্ষ সহজেই ধরতে পারা যায়
ক্রস অক্ষ
সারিতে প্রধান অক্ষ সেট করা
flex-direction: row;সারিতে উল্টোভাবে প্রধান অক্ষ সেট করা
flex-direction: row-reverse;কলামে প্রধান অক্ষ সেট করা
flex-direction: column;কলামে উল্টোভাবে প্রধান অক্ষ সেট করা
flex-direction: column-reverse;
আইটেমগুলো শুরুতে থাকবে
justify-content: flex-start;আইটেমগুলো শেষে থাকবে
justify-content: flex-end;আইটেমগুলো মাঝখানে থাকবে
justify-content: center;প্রথম ও শেষ আইটেম ছাড়া মাঝখানে সব আইটেমের মধ্যে স্পেস ভাগ করে দেওয়া
justify-content: space-between;প্রত্যেকটা আইটেমের সাথে স্পেস ভাগ করে দেওয়া
justify-content: space-around;স্পেসগুলো সমান সমানভাবে ভাগ করা
justify-content: space-evenly;
সবগুলো লাইন শুরুতে
align-content: flex-start;সবগুলো লাইন শেষে
align-content: flex-end;সবগুলো লাইন মাঝখানে
align-content: center;প্রথম ও শেষ লাইন বাদে মাঝখানের বাকীগুলোর মধ্যে স্পেস ভাগ করে
align-content: space-between;সব লাইনের মধ্যে স্পেস ভাগ করে
align-content: space-around;লাইনগুলো কোনো স্পেস রাখবে না
align-content: stretch;
সবগুলো চাইল্ড ইলিমেন্ট জায়গা বৃদ্ধি পেলে নিজে কিভাবে বৃদ্ধি পাবে
flex-grow: 1;সবগুলো চাইল্ড ইলিমেন্ট জায়গা সংকোচিত হলে নিজে কিভাবে সংকোচিত হবে
flex-shrink: 1;স্পেস ডিস্ট্রিবিউট হওয়ার আগপর্যন্ত আইটেমের সাইজ
flex-basis: 100%;সবগুলো একসাথে শর্টকাটে
flex: <বৃদ্ধি> <সংকোচন> <বেইজ>;সবগুলো একসাথে শর্টকাটে উদাহরণ
flex: 1 1 100%;
ব্লক লেভেল ফ্লেক্সবক্স
display: flex;ইনলাইন লেভেল ফ্লেক্সবক্স
display: inline-flex;
আইটেম র্যাপ হবে না
flex-wrap: nowrap;আইটেম র্যাপ হবে
flex-wrap: wrap;উল্টোভাবে আইটেম র্যাপ হবে
flex-wrap: wrap-reverse;
ক্রস অক্ষের শুরুতে
align-items: flex-start;ক্রস অক্ষের শেষে
align-items: flex-end;ক্রস অক্ষের মাঝখানে
align-items: center;ক্রস অক্ষের বেইসলাইনে
align-items: baseline;ক্রস অক্ষের মধ্যে ছড়িয়ে দেওয়া
align-items: stretch;
চাইল্ড ইলিমেন্টকে যেকোনো অর্ডারে সেট করা
order: ইন্টিজার;উদাহরণ
order: 1;উদাহরণ
order: 3;