সিএসএস ফ্লেক্সবক্স মডেলটি প্রতিষ্ঠিত সিএসএস বক্স মডেলকে উন্নত করার জন্য তৈরি করা হয়েছে। ফ্লেক্সবক্স মডেলে এখনও বক্স মডেলের প্রধান উপাদান (মার্জিন, প্যাডিং, সীমানা এবং বিষয়বস্তু) রয়েছে, তবে কন্টেইনার/অভিভাবকের সন্তানদের দিয়ে স্থানটি সর্বোত্তমভাবে পূরণ করার জন্য নমনীয়তা প্রদান করে।
এই টিউটোরিয়ালটি আপনাকে ফ্লেক্সবক্স মডিউলটি আরও ভালভাবে বুঝতে সাহায্য করবে যাতে আপনি আপনার সাইটগুলিকে আরও প্রতিক্রিয়াশীল করতে শুরু করতে পারেন।
নিম্নলিখিতটি একটি মৌলিক ফ্লেক্সবক্স মডেল প্রদর্শনের জন্য স্টার্টার কোড - আমরা ফ্লেক্সবক্স সম্পর্কে কথা বলার সাথে সাথে অনুগ্রহ করে অনুসরণ করুন!
<!DOCTYPE html>
<head>
<title>Flexbox</title>
<style>
* {
box-sizing: border-box;
font-family: 'Roboto'
}
.parent-container {
height: 700px;
background: green;
width: 700px;
padding: 20px;
}
.child-item {
height: 200px;
width: 200px;
margin: 0px;
padding: 20px;
}
.child-item:first-child {
background: orange;
}
.child-item.one {
background: purple;
}
.child-item.two {
background: aliceblue;
}
.child-item.three {
background: grey;
}
.child-item.four {
background: pink;
}
.child-item.five {
background: yellowgreen;
}
.child-item.six {
background: red;
}
.child-item.seven {
background: blanchedalmond;
}
.child-item.eight {
background: white;
}
.child-item.nine {
background: lightblue;
}
.child-item.nine {
background: darkred;
}
.child-item:last-child {
background: yellow;
}
</style>
</head>
<body>
<div class="parent-container">
<div class="child-item">Lisa Simpson</div>
<div class="child-item one">Bart Simpson</div>
<div class="child-item two">Maggie Simpson</div>
<div class="child-item three">Homer Simpson</div>
<div class="child-item four">Marge Simpson</div>
<div class="child-item five">Grampa Simpson</div>
<div class="child-item six">Santa's Little Helper</div>
<div class="child-item seven">Apu Nahasapeemapetilon</div>
<div class="child-item eight">Moe Szyslak</div>
<div class="child-item nine">Ned Flanders</div>
<div class="child-item ten">Snowball II</div>
</div>
<script src="" async defer></script>
</body>
</html> প্যারেন্ট কন্টেইনার (ফ্লেক্সবক্স) বৈশিষ্ট্য
প্রদর্শন:ফ্লেক্স
ডিসপ্লে প্রপার্টির বেশ কিছু মান রয়েছে যা আমরা আমাদের কন্টেইনারগুলিকে স্ক্রিনে রাখতে ব্যবহার করতে পারি। আপনি হয়তো দেখেছেন ব্লক, ইনলাইন-ব্লক, কোনোটিই নয়, লুকানো, ইনলাইন ইতিমধ্যেই, কিন্তু আমরা এখন যেটির উপর ফোকাস করতে যাচ্ছি তাকে বলা হয় ফ্লেক্স .
প্রথমে, আমি আপনার কাছে যা করতে চাই তা হল একটি বড় পাত্রের কল্পনা করুন - একটি ট্রেজার চেস্ট, একটি খেলনার বাক্স বা একটি কার্ডবোর্ডের বাক্স - এবং তারপরে কন্টেইনারের ভিতরে আইটেম রাখার কল্পনা করুন। বড় পাত্রটিকে আমরা পিতামাতা বলি অথবা ফ্লেক্সবক্স এবং কন্টেইনারের ভিতরে যে ছোট আইটেমগুলি যায় তা হল শিশু অথবা ফ্লেক্স আইটেম।
যখন আমরা display: flex যোগ করি একটি অভিভাবক কন্টেনারে, সম্পত্তিটি সেই পাত্রে এবং সেই পাত্রে একাই বরাদ্দ করা হয় - শিশুরা সম্পত্তির উত্তরাধিকারী হয় না (তবে, তারা সম্পত্তিটি তাদের নিজস্ব পাত্রে ব্যবহার করতে পারে যা তাদেরকে প্রভাবিত করবে শিশু)।
এই বৈশিষ্ট্যটি আমরা ব্যবহার করতে পারি এমন সমস্ত ধরণের অন্যান্য বৈশিষ্ট্য খোলে যা আমরা আগে করতে পারিনি:flex-direction , justify-content , align-items , align-self , flex-wrap এবং flex-flow .
উপরে কোড এডিটর চালান. এই মুহুর্তে, আপনার পিতামাতার ভিতরে একটি বড় সবুজ কন্টেইনার, প্যারেন্ট কন্টেনার এবং 11টি ছোট পাত্র, চাইল্ড কন্টেনার দেখতে হবে।
চাইল্ড কন্টেইনারগুলির অভিযোজন একে অপরের উপরে থাকে কারণ ডিফল্ট হল display: block . আপনি যদি মনে করেন, যখন আমরা display: block ব্যবহার করি , ধারকটি তার মধ্যে থাকা সম্পূর্ণ সারিটি নেয়৷ মার্জিনের ডিফল্ট প্যারেন্ট কন্টেইনারের প্রস্থে প্রসারিত হয়, যার ফলে উভয় চাইল্ড কন্টেইনার একে অপরের উপরে থাকে৷
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।
বিপরীতে, display: flex ব্যবহার করে ফ্লোট এবং উল্লম্ব-সারিবদ্ধ করার মতো পুরানো বক্স মডেল বৈশিষ্ট্যগুলি ব্যবহার না করেই আমাদের প্যারেন্ট কন্টেনারে চাইল্ড কন্টেইনারগুলিকে যে কোনও উপায়ে সহজেই অবস্থান করতে দেয়৷
display: flex যোগ করার চেষ্টা করুন কোড এডিটরে স্টাইল ট্যাগে CSS-এ যাতে প্যারেন্ট কন্টেইনারের CSS দেখতে এরকম হয়:
.parent-container {
height: 700px;
background: green;
width: 700px;
padding: 20px;
display: flex;
display: flex যোগ করা হচ্ছে .parent-container-এ শিশু কন্টেইনারগুলির অভিযোজন পরিবর্তনের ফলে। একবার আপনি আঘাত করলে, আপনি এখন চাইল্ড কন্টেনারগুলি পাশাপাশি দেখতে পাবেন।
display: flex ব্যবহার করে পরিবর্তে display: block , ডিফল্ট মার্জিন 0 এ সেট করা হয়েছে। তারপরে আমরা এটিকে ম্যানিপুলেট করতে পারি যদিও আমরা উপযুক্ত মনে করি!
ফ্লেক্স-ডিরেকশন
ফ্লেক্স-দিকনির্দেশ সম্পত্তি আমাদের কন্টেইনারের প্রধান অক্ষ সেট আপ করে। ফ্লেক্স কন্টেইনারে ডিফল্ট সেটিং হল সারি। display: flex দিয়ে প্যারেন্ট কন্টেইনার সেট আপ করার সময় , একটি ফ্লেক্স-দিকনির্দেশ স্থাপন করার কোন প্রয়োজন নেই যদি না আপনি আপনার বিষয়বস্তু একটি কলামে থাকতে চান৷
ডিফল্ট দিকের প্রধান অক্ষটি বাম থেকে ডানে এবং ক্রস অক্ষটি উপরে থেকে নীচে, যেমনটি এখানে দেখা যায়:
চলুন flex-direction: column যোগ করার চেষ্টা করি আমাদের .parent-container-এ উপরের কোড এডিটরে। আপনি চাপলে কি হয়?
মনে হচ্ছে যখন আমরা flex-direction স্যুইচ করি তখন অক্ষগুলি উল্টে যায় কলামে:আমাদের প্রধান অক্ষটি কী ছিল তা ক্রস অক্ষে পরিণত হয় এবং তারপরে আমাদের ক্রস অক্ষটি কী ছিল প্রধান অক্ষে পরিণত হয়, যেমনটি নীচে চিত্রিত হয়েছে:
ফলস্বরূপ, আমাদের উদাহরণে আমাদের শিশুদের পাত্রে তাদের কুড়াল উল্টে গেছে! তাই এখন শিশু পাত্রগুলি আবার একে অপরের উপরে।
flex-direction সম্পর্কে মনে রাখার সবচেয়ে বড় বিষয় হল যে প্রধান অক্ষের দিকটি আপনার flex-direction এর মানের সাথে মিলে যায় সম্পত্তি (কলামটি উপরে থেকে নীচে, সারিটি বাম থেকে ডানে)।
জাস্টিফাই-সামগ্রী প্রধান অক্ষের ব্যবধানের সাথে নিজেকে উদ্বিগ্ন করে এবং সারিবদ্ধ-আইটেমগুলি ক্রস অক্ষের চারপাশে ব্যবধানের সাথে নিজেকে উদ্বিগ্ন করে। আমরা একটু পরে সেই বৈশিষ্ট্যগুলিতে প্রবেশ করব।
ফ্লেক্স-দিকনির্দেশের জন্য আরও দুটি সম্ভাবনা রয়েছে:row-reverse এবং column-reverse . এই বৈশিষ্ট্যগুলি সারি এবং কলামের অনুরূপ, তবে flex-items একটি বিপরীত ক্রমে রাখা হয়, ডান থেকে বামে, সারি-বিপরীতের ক্ষেত্রে, এবং কলাম-বিপরীতের জন্য নীচে থেকে উপরে।
এই নির্দিষ্ট মানগুলির ব্যবহারের ক্ষেত্রে আপনার ওয়েব থেকে মোবাইল বা ট্যাবলেটে আপনার পৃষ্ঠায় একটি ভিন্ন লেআউট বা অর্ডার থাকা প্রয়োজন।
ফ্লেক্স-র্যাপ
এখন পর্যন্ত আমরা শিখেছি কিভাবে display: flex পিতামাতার সন্তানের পাত্রে প্রভাব ফেলে এবং তারপরে কীভাবে সেই শিশু পাত্রে সারি বা একটি কলামে প্রবাহকে নিয়ন্ত্রণ করা যায়। যদি পিতামাতার আকার রুম আউট রান? কি ঘটেছে? এবং কিভাবে আমরা এটা ঠিক করতে পারি?
উত্তরটি flex-wrap নামক সম্পত্তির আকারে আসে . ডিফল্টরূপে, flex-wrap nowrap এ সেট করা আছে . এর মানে হল যে শিশু কন্টেইনারগুলি প্যারেন্ট কন্টেইনারকে উপচে পড়তে পারে, যার ফলে অবাঞ্ছিত লেআউট সমস্যা হতে পারে। চলুন flex-wrap: wrap যোগ করার চেষ্টা করি; .parent-container-এ এবং দেখুন কি হয়:
এখানে পাত্রের বিন্যাস অনেক সুন্দর দেখায়। ফ্লেক্স-র্যাপ সমস্ত বাচ্চাদের উপাদানগুলিকে নিয়ে যাবে, যতক্ষণ না এটি প্যারেন্ট কন্টেইনারের প্রস্থে আঘাত না করে ততক্ষণ তাদের পাশাপাশি রাখবে এবং তারপরে সমস্ত কন্টেইনারগুলি প্রদর্শিত না হওয়া পর্যন্ত প্রক্রিয়াটি পুনরাবৃত্তি করতে আরও চাইল্ড কন্টেনার যোগ করতে পরবর্তী সারিতে যান।
ফ্লেক্স-র্যাপের তিনটি উপলব্ধ বৈশিষ্ট্য রয়েছে:Nowrap, wrap এবং wrap-reverse. র্যাপ-রিভার্স হল র্যাপ এর মতই যে এটি উপরে থেকে নীচের পরিবর্তে নীচে থেকে উপরে প্রবাহিত হয়।
ফ্লেক্স-ফ্লো
ফ্লেক্স-ফ্লো হল flex-direction-এর সংক্ষিপ্ত বিবরণ এবং flex-wrap . সিনট্যাক্স হল flex-flow: column wrap আপনি যদি চান আপনার ফ্লেক্স-দিককে কলাম এবং আপনার ফ্লেক্স-র্যাপটি মোড়ানো হোক। flex-flow: row nowrap ডিফল্ট মান।
ন্যায্যতা-সামগ্রী
ন্যায্যতা বিষয়বস্তুর সম্পত্তি মূল কন্টেইনারের প্রধান অক্ষ বরাবর প্রান্তিককরণের সাথে সম্পর্কিত। এটি আপনার flex-items বিতরণ করতে সাহায্য করে আপনার প্রয়োজনীয় স্থান গণনা না করেই প্রধান অক্ষ জুড়ে। justify-content-এর জন্য সর্বাধিক ব্যবহৃত ছয়টি সম্পত্তির মান হল flex-start (ডিফল্ট), flex-end , center , space-around , space-between এবং space-evenly .
ফ্লেক্স-স্টার্ট:
ফ্লেক্স-এন্ড:
কেন্দ্র:
স্পেস-আশেপাশে:
স্পেস-এর মধ্যে:
স্পেস-সমভাবে:
সারিবদ্ধ-আইটেমগুলি
align-items এর মধ্যে সবচেয়ে বড় পার্থক্য এবং justify-content , অক্ষ ছাড়াও এটি চাইল্ড কন্টেনারগুলিকে বিতরণ করে, এটি এর ডিফল্ট মান। একটি অনুস্মারক হিসাবে, যখন আমরা flex-direction ব্যবহার করি justify-content-এর ডিফল্ট মান হল flex-start . এটি align-items এর ক্ষেত্রে নয় . পরিবর্তে, ডিফল্ট মান প্রসারিত হয়.
ব্যাখ্যা করার জন্য, আসুন পৃষ্ঠার উপরের কোড সম্পাদকে ফিরে যাই এবং .child-container-এ প্রস্থ এবং উচ্চতা বের করি . আমাদের ইতিমধ্যেই display: flex আছে এবং flex-direction সেট চলুন flex-direction: row এর মধ্যে টগল করি এবং flex-direction: column কোন সীমাবদ্ধতা ছাড়াই ধারকটি কীভাবে আচরণ করে তা দেখতে। আপনি যা আশা করবেন তার সাথে এটি কীভাবে তুলনা করে?
কোন align-items ছাড়া নিয়ম সেট করলে, চাইল্ড কন্টেইনারটি ক্রস অক্ষের প্যারেন্ট কন্টেইনারের আকারে প্রসারিত হয়। যাইহোক, যদি আমরা একটি align-items সেট করি প্যারেন্ট কন্টেইনারে থাকা সম্পত্তি, চাইল্ড কন্টেইনারের আকার স্বয়ংক্রিয়ভাবে বিষয়বস্তুর আকারের সাথে সামঞ্জস্য করবে এবং এটিতে আপনার যা কিছু প্যাডিং এবং বর্ডার থাকবে।
সারিবদ্ধ-আইটেম:প্রসারিত
সারিবদ্ধ-আইটেম:কেন্দ্র
আমরা justify-content-এর জন্য যে সমস্ত অন্যান্য বৈশিষ্ট্যের মধ্য দিয়ে গিয়েছি এছাড়াও এখানে align-items এ প্রয়োগ করুন এবং একই জিনিস মানে, আমরা কোন অক্ষে আছি তা পরিবর্তন করেছি।
চাইল্ড কন্টেইনার (ফ্লেক্স-আইটেম) বৈশিষ্ট্য
অর্ডার
সাধারণত, একটি প্যারেন্ট কম্পোনেন্টের কন্টেইনারগুলির ক্রম অনুসরণ করবে যেভাবে সেগুলি HTML ফাইলে রাখা হয়েছে৷ যাইহোক, আপনি যদি কন্টেইনারের ক্রম নিয়ন্ত্রণ করতে চান – উদাহরণস্বরূপ, আপনি যদি মোবাইল ডিভাইসে থাকাকালীন অন্য একটি চাইল্ড কন্টেইনার হাইলাইট করতে চান – আপনি অর্ডার সম্পত্তি ব্যবহার করে তা করতে পারেন. প্রপার্টি হল একটি সাংখ্যিক মান যা নির্দেশ করে যে স্ক্রীনে প্রদর্শিত হওয়ার সময় চাইল্ড কন্টেনারগুলি কোন ক্রমে প্রবেশ করবে৷
আলাইন-সেল্ফ
align-self ডিফল্ট সারিবদ্ধকরণ বা align-items দ্বারা সেট করার অনুমতি দেয় ওভাররাইড করা মনে রাখবেন, align-self শুধুমাত্র কাজ করে যদি অভিভাবক নিজেই display: flex হন . align-self-এর মান flex-start হতে পারে , flex-end , বেসলাইন বা প্রসারিত।
উপসংহার
এই টিউটোরিয়ালে, আমরা নমনীয় বক্স মডেলের মৌলিক বিষয়গুলি কভার করেছি। আমরা আবিষ্কার করেছি যে ফ্লেক্সবক্স প্যারেন্ট কন্টেইনার এবং এর চাইল্ড কন্টেনারগুলির মধ্যে একটি সম্পর্ক জড়িত৷ পিতামাতার ফ্লেক্সবক্স বৈশিষ্ট্যগুলি পিতামাতার খালি জায়গায় শিশু কন্টেইনারগুলির গতিবিধিকে সরাসরি প্রভাবিত করে।
আমরা flex-direction ব্যবহার করি , justify-content , align-items এবং flex-wrap পিতামাতার মধ্যে সন্তানের অবস্থান পরিবর্তন করতে এবং আমরা অর্ডার এবং align-self ব্যবহার করি সন্তানের উপর সেই ডিফল্টের কিছু ওভাররাইড করতে বা পিতামাতার উপর রাখা নিয়ম।
এই বৈশিষ্ট্যগুলির সাথে খেলতে দয়া করে এখানে কোড সম্পাদক ব্যবহার করুন যাতে আপনি অনুশীলন করতে পারেন। আপনি একজন ফ্লেক্সবক্স বিশেষজ্ঞ হওয়ার পথে আছেন!
