ডেভসংকেত

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

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

কন্ট্রিবিউটর

  • HridoyHazard
  • iamraufu
  • mdmahinpro
  • zonayedpca

শেয়ার করুন

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

  • ফ্লেক্সবক্স অ্যাপ্লাই করা হয় সিএসএস প্রপার্টি 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;

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

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

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

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

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

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

    align-self: stretch;

ডেভসংকেত সম্পর্কে

ডেভসংকেত এর লক্ষ্য হচ্ছে বাংলাতে একটা বড় চিটশিটের ভান্ডার গড়ে তোলা। এটা সম্পূর্ণ স্বাধীন এবং ওপেন সোর্স গিটহাব অর্গানাইজেশন।

স্পন্সর