Flexbox শর্টহ্যান্ড প্রোপার্টি: flex
flex: <flex-grow> <flex-shrink> <flex-basis> — ফ্লেক্স আইটেমের ফ্লেক্সিবল লেন্থ সেট করে।
ফুল-হাইট লেআউটে আর্টিকেল এরিয়া স্ক্রোলেবল করার টেকনিক
কন্টেইনারের হাইট ১০০% (ভিউপোর্ট) হলে, আর্টিকেল এরিয়ার হাইট ০ বা নির্দিষ্ট মিন-হাইট দিয়ে overflow-y: auto দিলে কন্টেন্ট বড় হলে স্ক্রোল আসবে।
উদাহরণ ১: হাইট ০ (কন্টেন্ট অনুযায়ী বড় হবে, স্ক্রোল আসবে)
#container article {
flex: 1 1 auto;
overflow-y: auto;
height: 100px; /* সমান min-height: 100px */
}
ব্যবহারিক টিপ
- প্যারেন্ট কন্টেইনারের
display: flex; flex-direction: column; height: 100vh;দিন। - হেডার/ফুটার ফিক্সড হাইট, মিডল আর্টিকেল
flex: 1 1 auto। overflow-y: autoশুধু কন্টেন্ট ওভারফ্লো হলে স্ক্রোলবার দেখাবে।
