ডেভসংকেত

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

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

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

    শেয়ার করুন

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

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