{
    "id": "css-flexbox",
    "title": "সিএসএস ফ্লেক্সবক্স",
    "slug": "css-flexbox",
    "description": "ফ্লেক্সবক্স লেআউট অথবা ফ্লেক্সিবল বক্স মডিউল এর উদ্দেশ্য হচ্ছে একটা কন্টেইনারে থাকা আইটেমগুলোর মধ্যে স্পেস, অ্যালাইনমেন্ট , লেআউট প্রতিস্থাপনসহ আরো কিছু ব্যাপার ঠিক করা। ফ্লেক্সবক্সের সাহায্যে সাইজ জানা নেই অথবা ডায়নামিক সাইজের ইলিমেন্টও হ্যান্ডেল করা যায় খুব সহজেই।",
    "colorPref": "#ff8a00",
    "contents": [
        {
            "title": "ব্যাসিক ধারণা",
            "items": [
                {
                    "definition": "ফ্লেক্সবক্স অ্যাপ্লাই করা হয় সিএসএস প্রপার্টি display দিয়ে",
                    "code": "display: flex;"
                },
                {
                    "definition": "যে ইলিমেন্ট এর display তে flex প্রপার্টি অ্যাপ্লাই করা হয় সেটা ফ্লেক্স কন্টেইনার। কন্টেইনারে অ্যাপ্লাই করা যাবে এমন সিএসএস প্রপার্টিগুলো কন্টেইনার দিয়ে চিহ্নিত করা হয়েছে",
                    "code": "কন্টেইনার"
                },
                {
                    "definition": "কন্টেইনারের ভিতরের চিলড্রেন ইলিমেন্টকে ফ্লেক্স আইটেম হিসেবে ধরা হয়। চিলড্রেনে অ্যাপ্লাই করা যাবে এমন সিএসএস প্রপার্টিগুলো চিলড্রেন দিয়ে চিহ্নিত করা হয়েছে",
                    "code": "চিলড্রেন"
                },
                {
                    "definition": "একটা ফ্লেক্স কন্টেইনারের প্রধান অক্ষ হচ্ছে এর আইটেমগুলো যে বরাবর থাকবে। এটা যে সবসময়েই হরিজন্টাল হবে তাও কিন্তু নয়। এটা ডিপেন্ড করবে flex-direction প্রপার্টির উপর",
                    "code": "প্রধান অক্ষ"
                },
                {
                    "definition": "অপর অক্ষকে ক্রস অক্ষ বলে। প্রধান অক্ষ বের করতে পারলে ক্রস অক্ষ সহজেই ধরতে পারা যায়",
                    "code": "ক্রস অক্ষ"
                }
            ]
        },
        {
            "title": "কন্টেইনার - ফ্লেক্স ফরম্যাট",
            "items": [
                {
                    "definition": "ব্লক লেভেল ফ্লেক্সবক্স",
                    "code": "display: flex;"
                },
                {
                    "definition": "ইনলাইন লেভেল ফ্লেক্সবক্স",
                    "code": "display: inline-flex;"
                }
            ]
        },
        {
            "title": "কন্টেইনার - প্রধান অক্ষ",
            "items": [
                {
                    "definition": "সারিতে প্রধান অক্ষ সেট করা",
                    "code": "flex-direction: row;"
                },
                {
                    "definition": "সারিতে উল্টোভাবে প্রধান অক্ষ সেট করা",
                    "code": "flex-direction: row-reverse;"
                },
                {
                    "definition": "কলামে প্রধান অক্ষ সেট করা",
                    "code": "flex-direction: column;"
                },
                {
                    "definition": "কলামে উল্টোভাবে প্রধান অক্ষ সেট করা",
                    "code": "flex-direction: column-reverse;"
                }
            ]
        },
        {
            "title": "কন্টেইনার - আইটেম র‍্যাপ",
            "items": [
                {
                    "definition": "আইটেম র‍্যাপ হবে না",
                    "code": "flex-wrap: nowrap;"
                },
                {
                    "definition": "আইটেম র‍্যাপ হবে",
                    "code": "flex-wrap: wrap;"
                },
                {
                    "definition": "উল্টোভাবে আইটেম র‍্যাপ হবে",
                    "code": "flex-wrap: wrap-reverse;"
                }
            ]
        },
        {
            "title": "কন্টেইনার - প্রধান অক্ষের স্পেস ডিস্ট্রিবিউশন",
            "items": [
                {
                    "definition": "আইটেমগুলো শুরুতে থাকবে",
                    "code": "justify-content: flex-start;"
                },
                {
                    "definition": "আইটেমগুলো শেষে থাকবে",
                    "code": "justify-content: flex-end;"
                },
                {
                    "definition": "আইটেমগুলো মাঝখানে থাকবে",
                    "code": "justify-content: center;"
                },
                {
                    "definition": "প্রথম ও শেষ আইটেম ছাড়া মাঝখানে সব আইটেমের মধ্যে স্পেস ভাগ করে দেওয়া",
                    "code": "justify-content: space-between;"
                },
                {
                    "definition": "প্রত্যেকটা আইটেমের সাথে স্পেস ভাগ করে দেওয়া",
                    "code": "justify-content: space-around;"
                },
                {
                    "definition": "স্পেসগুলো সমান সমানভাবে ভাগ করা",
                    "code": "justify-content: space-evenly;"
                }
            ]
        },
        {
            "title": "কন্টেইনার - ক্রস অক্ষে আইটেমের অবস্থান",
            "items": [
                {
                    "definition": "ক্রস অক্ষের শুরুতে",
                    "code": "align-items: flex-start;"
                },
                {
                    "definition": "ক্রস অক্ষের শেষে",
                    "code": "align-items: flex-end;"
                },
                {
                    "definition": "ক্রস অক্ষের মাঝখানে",
                    "code": "align-items: center;"
                },
                {
                    "definition": "ক্রস অক্ষের বেইসলাইনে",
                    "code": "align-items: baseline;"
                },
                {
                    "definition": "ক্রস অক্ষের মধ্যে ছড়িয়ে দেওয়া",
                    "code": "align-items: stretch;"
                }
            ]
        },
        {
            "title": "কন্টেইনার - একলাইনের বেশী কন্টেন্টের অবস্থান",
            "items": [
                {
                    "definition": "সবগুলো লাইন শুরুতে",
                    "code": "align-content: flex-start;"
                },
                {
                    "definition": "সবগুলো লাইন শেষে",
                    "code": "align-content: flex-end;"
                },
                {
                    "definition": "সবগুলো লাইন মাঝখানে",
                    "code": "align-content: center;"
                },
                {
                    "definition": "প্রথম ও শেষ লাইন বাদে মাঝখানের বাকীগুলোর মধ্যে স্পেস ভাগ করে",
                    "code": "align-content: space-between;"
                },
                {
                    "definition": "সব লাইনের মধ্যে স্পেস ভাগ করে",
                    "code": "align-content: space-around;"
                },
                {
                    "definition": "লাইনগুলো কোনো স্পেস রাখবে না",
                    "code": "align-content: stretch;"
                }
            ]
        },
        {
            "title": "চিলড্রেন - অর্ডার",
            "items": [
                {
                    "definition": "চাইল্ড ইলিমেন্টকে যেকোনো অর্ডারে সেট করা",
                    "code": "order: ইন্টিজার;"
                },
                {
                    "definition": "উদাহরণ",
                    "code": "order: 1;"
                },
                {
                    "definition": "উদাহরণ",
                    "code": "order: 3;"
                }
            ]
        },
        {
            "title": "চিলড্রেন - বৃদ্ধি, সংকোচন ও বেইজ",
            "items": [
                {
                    "definition": "সবগুলো চাইল্ড ইলিমেন্ট জায়গা বৃদ্ধি পেলে নিজে কিভাবে বৃদ্ধি পাবে",
                    "code": "flex-grow: 1;"
                },
                {
                    "definition": "সবগুলো চাইল্ড ইলিমেন্ট জায়গা সংকোচিত হলে নিজে কিভাবে সংকোচিত হবে",
                    "code": "flex-shrink: 1;"
                },
                {
                    "definition": "স্পেস ডিস্ট্রিবিউট হওয়ার আগপর্যন্ত আইটেমের সাইজ",
                    "code": "flex-basis: 100%;"
                },
                {
                    "definition": "সবগুলো একসাথে শর্টকাটে",
                    "code": "flex: <বৃদ্ধি> <সংকোচন> <বেইজ>;"
                },
                {
                    "definition": "সবগুলো একসাথে শর্টকাটে উদাহরণ",
                    "code": "flex: 1 1 100%;"
                }
            ]
        },
        {
            "title": "চিলড্রেন - নিজের অ্যালাইনমেন্ট(অবাধ্য)",
            "items": [
                {
                    "definition": "ক্রস অক্ষের শুরুতে",
                    "code": "align-self: flex-start;"
                },
                {
                    "definition": "ক্রস অক্ষের শেষে",
                    "code": "align-self: flex-end;"
                },
                {
                    "definition": "ক্রস অক্ষের মাঝখানে",
                    "code": "align-self: center;"
                },
                {
                    "definition": "ক্রস অক্ষের বেইসলাইনে",
                    "code": "align-self: baseline;"
                },
                {
                    "definition": "ক্রস অক্ষের মধ্যে ছড়িয়ে দেওয়া",
                    "code": "align-self: stretch;"
                }
            ]
        }
    ]
}