সিএসএস ফ্লেক্সবক্স

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

ব্যাসিক ধারণা

Link
  • ফ্লেক্সবক্স অ্যাপ্লাই করা হয় সিএসএস প্রপার্টি display দিয়ে

    display: flex;
  • যে ইলিমেন্ট এর display তে flex প্রপার্টি অ্যাপ্লাই করা হয় সেটা ফ্লেক্স কন্টেইনার। কন্টেইনারে অ্যাপ্লাই করা যাবে এমন সিএসএস প্রপার্টিগুলো কন্টেইনার দিয়ে চিহ্নিত করা হয়েছে

    কন্টেইনার
  • কন্টেইনারের ভিতরের চিলড্রেন ইলিমেন্টকে ফ্লেক্স আইটেম হিসেবে ধরা হয়। চিলড্রেনে অ্যাপ্লাই করা যাবে এমন সিএসএস প্রপার্টিগুলো চিলড্রেন দিয়ে চিহ্নিত করা হয়েছে

    চিলড্রেন
  • একটা ফ্লেক্স কন্টেইনারের প্রধান অক্ষ হচ্ছে এর আইটেমগুলো যে বরাবর থাকবে। এটা যে সবসময়েই হরিজন্টাল হবে তাও কিন্তু নয়। এটা ডিপেন্ড করবে flex-direction প্রপার্টির উপর

    প্রধান অক্ষ
  • অপর অক্ষকে ক্রস অক্ষ বলে। প্রধান অক্ষ বের করতে পারলে ক্রস অক্ষ সহজেই ধরতে পারা যায়

    ক্রস অক্ষ

কন্টেইনার - ফ্লেক্স ফরম্যাট

Link
  • ব্লক লেভেল ফ্লেক্সবক্স

    display: flex;
  • ইনলাইন লেভেল ফ্লেক্সবক্স

    display: inline-flex;

কন্টেইনার - প্রধান অক্ষ

Link
  • সারিতে প্রধান অক্ষ সেট করা

    flex-direction: row;
  • সারিতে উল্টোভাবে প্রধান অক্ষ সেট করা

    flex-direction: row-reverse;
  • কলামে প্রধান অক্ষ সেট করা

    flex-direction: column;
  • কলামে উল্টোভাবে প্রধান অক্ষ সেট করা

    flex-direction: column-reverse;

কন্টেইনার - আইটেম র‍্যাপ

Link
  • আইটেম র‍্যাপ হবে না

    flex-wrap: nowrap;
  • আইটেম র‍্যাপ হবে

    flex-wrap: wrap;
  • উল্টোভাবে আইটেম র‍্যাপ হবে

    flex-wrap: wrap-reverse;

কন্টেইনার - প্রধান অক্ষের স্পেস ডিস্ট্রিবিউশন

Link
  • আইটেমগুলো শুরুতে থাকবে

    justify-content: flex-start;
  • আইটেমগুলো শেষে থাকবে

    justify-content: flex-end;
  • আইটেমগুলো মাঝখানে থাকবে

    justify-content: center;
  • প্রথম ও শেষ আইটেম ছাড়া মাঝখানে সব আইটেমের মধ্যে স্পেস ভাগ করে দেওয়া

    justify-content: space-between;
  • প্রত্যেকটা আইটেমের সাথে স্পেস ভাগ করে দেওয়া

    justify-content: space-around;
  • স্পেসগুলো সমান সমানভাবে ভাগ করা

    justify-content: space-evenly;

কন্টেইনার - ক্রস অক্ষে আইটেমের অবস্থান

Link
  • ক্রস অক্ষের শুরুতে

    align-items: flex-start;
  • ক্রস অক্ষের শেষে

    align-items: flex-end;
  • ক্রস অক্ষের মাঝখানে

    align-items: center;
  • ক্রস অক্ষের বেইসলাইনে

    align-items: baseline;
  • ক্রস অক্ষের মধ্যে ছড়িয়ে দেওয়া

    align-items: stretch;

কন্টেইনার - একলাইনের বেশী কন্টেন্টের অবস্থান

Link
  • সবগুলো লাইন শুরুতে

    align-content: flex-start;
  • সবগুলো লাইন শেষে

    align-content: flex-end;
  • সবগুলো লাইন মাঝখানে

    align-content: center;
  • প্রথম ও শেষ লাইন বাদে মাঝখানের বাকীগুলোর মধ্যে স্পেস ভাগ করে

    align-content: space-between;
  • সব লাইনের মধ্যে স্পেস ভাগ করে

    align-content: space-around;
  • লাইনগুলো কোনো স্পেস রাখবে না

    align-content: stretch;

চিলড্রেন - অর্ডার

Link
  • চাইল্ড ইলিমেন্টকে যেকোনো অর্ডারে সেট করা

    order: ইন্টিজার;
  • উদাহরণ

    order: 1;
  • উদাহরণ

    order: 3;

চিলড্রেন - বৃদ্ধি, সংকোচন ও বেইজ

Link
  • সবগুলো চাইল্ড ইলিমেন্ট জায়গা বৃদ্ধি পেলে নিজে কিভাবে বৃদ্ধি পাবে

    flex-grow: 1;
  • সবগুলো চাইল্ড ইলিমেন্ট জায়গা সংকোচিত হলে নিজে কিভাবে সংকোচিত হবে

    flex-shrink: 1;
  • স্পেস ডিস্ট্রিবিউট হওয়ার আগপর্যন্ত আইটেমের সাইজ

    flex-basis: 100%;
  • সবগুলো একসাথে শর্টকাটে

    flex: <বৃদ্ধি> <সংকোচন> <বেইজ>;
  • সবগুলো একসাথে শর্টকাটে উদাহরণ

    flex: 1 1 100%;

চিলড্রেন - নিজের অ্যালাইনমেন্ট(অবাধ্য)

Link
  • ক্রস অক্ষের শুরুতে

    align-self: flex-start;
  • ক্রস অক্ষের শেষে

    align-self: flex-end;
  • ক্রস অক্ষের মাঝখানে

    align-self: center;
  • ক্রস অক্ষের বেইসলাইনে

    align-self: baseline;
  • ক্রস অক্ষের মধ্যে ছড়িয়ে দেওয়া

    align-self: stretch;