CSS Flexbox
- পূর্ববর্তী পৃষ্ঠা CSS Box Sizing
- পরবর্তী পৃষ্ঠা CSS মিডিয়া কোয়ারি
CSS Flexbox Layout Module
ফ্লেক্সবক্স লেআউট মডিউল (প্রকাশ) পূর্বে, উপলব্ধ ব্যবস্থাপনা মডেল হল - চারটি এইমডেল
- ব্লক (Block), যা ওয়েবসাইটের অংশ (সেকশন) ব্যবহার করে
- ইনলাইন (Inline), যা টেক্সট ব্যবহার করে
- টেবিল, যা দ্বিমাত্রিক টেবিল ডাটা ব্যবহার করে
- লোকেশন, যা ইলেমেন্টের স্পষ্ট অবস্থান নির্ধারণ করে
ফ্লেক্সবক্স লেআউট মডিউল, যা ফ্লেক্সিবল রেসপন্সিভ লেআউট স্ট্রাকচার ডিজাইন করতে সহজ করে তোলে, ফ্লোটিং বা লোকেশন ব্যবহার করতে হবে না。
ব্রাউজার সমর্থন
সমস্ত আধুনিক ব্রাউজারগুলি এটির সমর্থন করে ফ্লেক্সবক্স প্রতিশব্দ
| 29.0 | 11.0 | 22.0 | 10 | 48 |
ফ্লেক্সবক্স ইলেমেন্ট
ফ্লেক্সবক্স মডেল ব্যবহার করার জন্য একটি ফ্লেক্স কনটেনার সংজ্ঞায়িত করতে হবে。
上面的元素表示一个带有三个 flex 项目的 flex 容器（蓝色区域）。
উদাহরণ
含有三个 flex 项目的 flex 容器：
<div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div>
父元素（容器）
通过将 display 属性设置为 flex，flex 容器将可伸缩：
উদাহরণ
.flex-container {
display: flex;
}
নিচে ফ্লেক্স কন্টেনার প্রকৃতিগুলি দেখুন:
flex-direction এট্রিবিউট
flex-direction এই প্রকৃতি কন্টেনারটিকে কোন দিকে সারি করতে হবে তা নির্ধারণ করে:
উদাহরণ
column এই মান প্রক্রিয়াগুলিকে পড়াশোনা করতে, যারা প্রক্রিয়াগুলিকে ভিত্তিস্তম্ভে সারি করে (উপর থেকে নীচে):
.flex-container {
display: flex;
flex-direction: column;
}
উদাহরণ
column-reverse এই মান প্রক্রিয়াগুলিকে পড়াশোনা করতে, যারা প্রক্রিয়াগুলিকে ভিত্তিস্তম্ভে সারি করে (তালু থেকে নীচে):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
উদাহরণ
row এই মান প্রক্রিয়াগুলিকে পড়াশোনা করতে, যারা প্রক্রিয়াগুলিকে হলচ্যুড়িতে সারি করে (বাম থেকে ডান):
.flex-container {
display: flex;
flex-direction: row;
}
উদাহরণ
row-reverse এই মান প্রক্রিয়াগুলিকে পড়াশোনা করতে, যারা প্রক্রিয়াগুলিকে হলচ্যুড়িতে সারি করে (ডান থেকে বাম):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
flex-wrap এট্রিবিউট
flex-wrap এই প্রকৃতি প্রক্রিয়াগুলিকে পড়াশোনা করতে, যারা প্রক্রিয়াগুলিকে সারি করা উচিত কিনা তা নির্ধারণ করে:
এই উদাহরণটিতে ১২টি ফ্লেক্স প্রক্রিয়া রয়েছে, যাতে flex-wrap প্রকৃতির বেশিরভাগ প্রদর্শন করা যায়。
উদাহরণ
wrap এই মান প্রক্রিয়াগুলিকে পড়াশোনা করতে, যারা প্রক্রিয়াগুলিকে প্রয়োজনের জন্য সারি করতে বাধ্য করে:
.flex-container {
display: flex;
flex-wrap: wrap;
}
উদাহরণ
nowrap এই মান প্রক্রিয়াগুলিকে পড়াশোনা করতে, যারা প্রক্রিয়াগুলিকে কোনও সারি না করতে বাধ্য করে (ডিফল্ট):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
উদাহরণ
wrap-reverse এই মান প্রক্রিয়াগুলিকে পড়াশোনা করতে, যারা প্রক্রিয়াগুলিকে পারস্পরিক ক্রমে সারি করতে বাধ্য করে:
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
flex-flow এট্রিবিউট
flex-flow এই প্রকৃতি হল ফ্লেক্স-ডায়রেকশন এবং flex-wrap প্রকৃতিকে একসাথে সেট করার জন্য একটি সংক্ষিপ্ত প্রকৃতি:
উদাহরণ
.flex-container {
display: flex;
flex-flow: row wrap;
}
justify-content এট্রিবিউট
justify-content এই প্রকৃতি ফ্লেক্স প্রক্রিয়াকে সামঞ্জস্য করার জন্য ব্যবহৃত হয়:
উদাহরণ
center এই মান প্রক্রিয়াগুলিকে পড়াশোনা করতে, যারা প্রক্রিয়াগুলিকে কন্টেনারের মধ্যস্থ দিকে সামঞ্জস্য করে:
.flex-container {
display: flex;
justify-content: center;
}
উদাহরণ
flex-start এই মান প্রক্রিয়াগুলিকে পড়াশোনা করতে, যারা প্রক্রিয়াগুলিকে কন্টেনারের প্রথম দিকে সামঞ্জস্য করে (ডিফল্ট):
.flex-container {
display: flex;
justify-content: flex-start;
}
উদাহরণ
flex-end এই মান প্রক্রিয়াগুলিকে পড়াশোনা করতে, যারা প্রক্রিয়াগুলিকে কন্টেনারের শেষের দিকে সামঞ্জস্য করে:
.flex-container {
display: flex;
justify-content: flex-end;
}
উদাহরণ
space-around এই মান প্রক্রিয়াগুলিকে পড়াশোনা করতে, যারা সারিতের প্রথম, মধ্য এবং শেষে স্পেস দিয়েছে:
.flex-container {
display: flex;
justify-content: space-around;
}
উদাহরণ
space-between এই মান প্রক্রিয়াগুলিকে পড়াশোনা করতে, যারা সারিতের মধ্যে স্পেস দিয়েছে:
.flex-container {
display: flex;
justify-content: space-between;
}
align-items এট্রিবিউট
align-items এই প্রকৃতি ফ্লেক্স প্রক্রিয়াকে উপরোক্ত দিকে সামঞ্জস্য করার জন্য ব্যবহৃত হয়。
এই উদাহরণগুলিতে, আমরা ২০০ পিক্সেল উচ্চতার কন্টেনার ব্যবহার করি, যাতে align-items প্রকৃতির বেশিরভাগ প্রদর্শন করা যায়。
উদাহরণ
center মাপক সম্পত্তির মধ্যে ফ্লেক্স প্রয়োগকৃতকে একান্ত্রন করবে:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
উদাহরণ
flex-start মাপক সম্পত্তির শীর্ষে ফ্লেক্স প্রয়োগকৃতকে একান্ত্রন করবে:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
উদাহরণ
flex-end মাপক সম্পত্তির তলায় ফ্লেক্স প্রয়োগকৃতকে একান্ত্রন করবে:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
উদাহরণ
stretch মাপক সম্পত্তির ফ্লেক্স প্রয়োগকৃতকে কোনের মাপক সম্পত্তিতে পূর্ণরূপে একান্ত্রন করবে (ডিফল্ট):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
উদাহরণ
baseline মাপক সম্পত্তির ফ্লেক্স প্রয়োগকৃতকে লিখিত সময়বৃত্তের নীচে একান্ত্রন করবে:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
মনতদা:এই উদাহরণটিতে, আমরা প্রয়োগকৃতকে বিভিন্ন font-size-র সাহায্যে দেখাবো যে, প্রয়োগকৃতগুলো লিখিত সময়বৃত্তের নীচে একান্ত্রন করা হয়েছে:
align-content এট্রিবিউট
align-content এই প্রতিয়োগিতা ফ্লেক্স লাইনকে একান্ত্রন করতে ব্যবহৃত হয়।
এই উদাহরণগুলিতে, আমরা ৬০০ পিক্সেল উচ্চতার কোনের মাপক সম্পত্তি ব্যবহার করবো, এবং flex-wrap প্রতিয়োগিতা wrap সজ্জিত করবো, যাতে align-content প্রতিয়োগিতা উপদেশ সম্পর্কে ভালোভাবে দেখা যায়。
উদাহরণ
space-between মাপক সম্পত্তি ফ্লেক্স লাইনগুলোর মধ্যে সমান বিস্তৃতি প্রদর্শিত হবে:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
উদাহরণ
space-around মাপক সম্পত্তি ফ্লেক্স লাইনকে পূর্ব, মধ্য এবং পরবর্তী সবসময় সমান্তরাল সজ্জিত করবে:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
উদাহরণ
stretch মাপক সম্পত্তি স্প্রিংড় করে বাকি জায়গা জুড়বে (ডিফল্ট):
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
উদাহরণ
center মাপক সম্পত্তির মধ্যে ফ্লেক্স লাইন প্রদর্শিত হবে:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
উদাহরণ
flex-start মাপক সম্পত্তির ভাবত ফ্লেক্স লাইন প্রদর্শিত হবে:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
উদাহরণ
flex-end মাপক সম্পত্তির শেষে ফ্লেক্স লাইন প্রদর্শিত হবে:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
পরফেক্ট সমান্তরাল
নিচের উদাহরণে, আমরা একটি অত্যন্ত সাধারণ শৈলী সমস্যা সমাধান করবো:
সমাধান: justify-content এবং align-items প্রতিয়োগিতা সমান্তরাল হিসাবে সজ্জিত করে তো ফ্লেক্স প্রয়োগকৃত হবে পরফেক্ট সমান্তরাল:
উদাহরণ
.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}
সন্তান (প্রয়োগকৃত) এলিমেন্ট
flex কোনের সরাসরি সন্তান আটক্ষিক প্রয়োগকৃত হয়।
এই তত্ত্বটি একটি গ্রীষ্মবৃত্ত সমস্ত flex কন্টেনারের চারটি নীল সমস্ত flex এলাকা
উদাহরণ
<div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>
সমস্ত flex এলাকার জন্য ব্যবহৃত প্রতিভা হল:
orderflex-growflex-shrinkflex-basisflexalign-self
order প্রতিভা
order প্রতিভা নির্দেশ করে flex এলাকার ক্রম
কোডযোগ্য প্রথম flex এলাকা সমস্ত সাজসজ্জায় প্রথম দেখানো হবে না
order এই মানটি দশমান হতে হবে, ডিফল্ট মান 0
উদাহরণ
order প্রতিভা সমস্ত flex এলাকার ক্রম পরিবর্তন করতে পারে
<div class="flex-container"> <div style="order: 3">1</div> <div style="order: 2">2</div> <div style="order: 4">3</div> <div style="order: 1">4</div> </div>
flex-grow প্রতিভা
flex-grow প্রতিভা নির্দেশ করে কোনও flex এলাকা অন্যান্য flex এলাকার মতো কতটা বৃদ্ধি করবে
এই মানটি দশমান হতে হবে, ডিফল্ট মান 0
উদাহরণ
তৃতীয় সমস্ত এলাকার বৃদ্ধির গতি অন্যান্য সমস্ত এলাকার তুলনায় আটগুণ বেশি করুন:
<div class="flex-container"> <div style="flex-grow: 1">1</div> <div style="flex-grow: 1">2</div> <div style="flex-grow: 8">3</div> </div>
flex-shrink প্রতিভা
flex-shrink প্রতিভা নির্দেশ করে কোনও flex এলাকা অন্যান্য flex এলাকার মতো কতটা সংকুচিত হবে
এই মানটি দশমান হতে হবে, ডিফল্ট মান 0
উদাহরণ
তৃতীয় সমস্ত এলাকাকে অন্যান্য সমস্ত এলাকার মতো সংকুচিত হতে দিতে না
<div class="flex-container"> <div>1</div> <div>2</div> <div style="flex-shrink: 0">3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div>
flex-basis প্রতিভা
flex-basis প্রতিভা সমস্ত flex এলাকার প্রারম্ভিক দৈর্ঘ্যকে নির্দেশ করে
উদাহরণ
তৃতীয় সমস্ত এলাকার প্রারম্ভিক দৈর্ঘ্য 200 পিক্সেল নির্দিষ্ট করুন:
<div class="flex-container"> <div>1</div> <div>2</div> <div style="flex-basis: 200px">3</div> <div>4</div> </div>
flex প্রতিভা
flex এই প্রতিভা হল flex-grow, flex-shrink এবং flex-basis প্রতিভার সংক্ষিপ্ত রূপ
উদাহরণ
তৃতীয় সমস্ত এলাকাকে বৃদ্ধি করতে অনুমদিত না (0), সংকুচিত হতেও অনুমদিত না (0), এবং প্রারম্ভিক দৈর্ঘ্য 200 পিক্সেল:
<div class="flex-container"> <div>1</div> <div>2</div> <div style="flex: 0 0 200px">3</div> <div>4</div> </div>
align-self একটি প্রতিভা
align-self প্রতিভা নির্দেশ সমস্ত লক্ষ্যণীয় এলাকার বাহ্যিক প্রদর্শনকে নির্দেশ করে。
align-self এপ্রোপার্টি কনটেনারের align-items এপ্রোপার্টির দ্বারা নির্ধারিত সামান্যতম সামান্যতম অবস্থানকে উপেক্ষা করে
এই উদাহরণগুলিতে, আমরা ২০০ পিক্সেল উচ্চতার কনটেনার ব্যবহার করি, যাতে align-self এপ্রোপার্টির বেশিরভাগ দেখা যায়
উদাহরণ
তৃতীয় ফ্লেক্সিবল অংশকে কনটেনারের মধ্যস্থ সামান্যতম অবস্থান দেওয়া
<div class="flex-container"> <div>1</div> <div>2</div> <div style="align-self: center">3</div> <div>4</div> </div>
উদাহরণ
দ্বিতীয় ফ্লেক্সিবল অংশকে কনটেনারের টপে সামান্যতম অবস্থান দেওয়া, তৃতীয় ফ্লেক্সিবল অংশকে কনটেনারের বহুমুখী সামান্যতম অবস্থান দেওয়া
<div class="flex-container"> <div>1</div> <div style="align-self: flex-start">2</div> <div style="align-self: flex-end">3</div> <div>4</div> </div>
flexbox-এর প্রতিক্রিয় ইমেজ লাইব্রেরি
flexbox-এর মাধ্যমে প্রতিক্রিয় ইমেজ লাইব্রেরি তৈরি করুন, যা সক্রিয় পর্দার মাপ অনুযায়ী চারটি, দুইটি বা সম্পূর্ণ পর্দা আকারের ইমেজের মধ্যে পরিবর্তন করে
ফ্লেক্সিবলকে ব্যবহার করে প্রতিক্রিয় ওয়েবসাইট
flexbox-এর মাধ্যমে প্রতিক্রিয় ওয়েবসাইট তৈরি করুন, যাতে ফ্লেক্সিবল নেভিগেশন এবং ফ্লেক্সিবল কনটেন্ট থাকে
CSS Flexbox এপ্রোপার্টি
এখানে, flexbox-এর সাথে ব্যবহৃত সকল CSS এপ্রোপার্টিগুলির তালিকা দেওয়া হয়
| এপ্রোপার্টি | বর্ণনা |
|---|---|
| display | এইমুক্তিকরণ ধরনটি হলো একটি এইচটিএমএল ইলেক্ট্রনিক ইঞ্জিনের জন্য |
| flex-direction | ফ্লেক্সিবল কনটেনারের ফ্লেক্সিবল অংশগুলির দিক নির্ধারণ করে |
| justify-content | যখন ফ্লেক্সিবল অংশগুলি মূখ্য অক্ষের সমস্ত উপলব্ধ জায়গা ব্যবহার করে না, তখন এই অংশগুলিকে সামঞ্জস্যপূর্ণভাবে সামান্যতম অবস্থান দেয় |
| align-items | যখন ফ্লেক্সিবল অংশগুলি মূখ্য অক্ষের সমস্ত উপলব্ধ জায়গা ব্যবহার করে না, তখন এই অংশগুলিকে সামঞ্জস্যপূর্ণভাবে সামান্যতম অবস্থান দেয় |
| flex-wrap | ফ্লেক্সিবল অংশগুলির মধ্যে কোনও ফ্লেক্স লাইনে যদি একটি ফ্লেক্সিবল অংশকে অবস্থান দেওয়ার যাবে না, তবে ফ্লেক্সিবল অংশগুলিকে সুবর্ণান্তর্যতা দেয় |
| align-content | flex-wrap এপ্রোপার্টির আচরণকে পরিবর্তন করে। align-items-এর মতো, কিন্তু ফ্লেক্সিবল অংশগুলিকে নয়, flex লাইনকে সামান্যতম অবস্থান দেয় |
| flex-flow | flex-direction এবং flex-wrap একক ধরনের প্রতিশব্দ |
| order | ফ্লেক্সিবল অংশগুলির একই কনটেনারের অন্যান্য ফ্লেক্সিবল অংশগুলির প্রতি সুবর্ণান্তর্যতা নির্ধারণ করে |
| align-self | ফ্লেক্সিবল অংশগুলির জন্য ব্যবহৃত। কনটেনারের align-items এপ্রোপার্টির ওপর সমূহবদ্ধ |
| flex | flex-grow, flex-shrink এবং flex-basis একক ধরনের প্রতিশব্দ |
- পূর্ববর্তী পৃষ্ঠা CSS Box Sizing
- পরবর্তী পৃষ্ঠা CSS মিডিয়া কোয়ারি
