Flexbox লেআউট সিস্টেমে justify-content এবং align-items প্রপার্টি ব্যবহার করে উপাদানগুলোর বিন্যাস এবং স্থান নির্ধারণ করা হয়। এই প্রপার্টি গুলো বিভিন্ন মান গ্রহণ করতে পারে, যেগুলোর মধ্যে flex-start, flex-end, center, baseline, এবং stretch অন্যতম।
এগুলি সাধারণত align-items বা align-self প্রপার্টির অংশ হিসেবে ব্যবহৃত হয়, যা Flex Items-এর উল্লম্ব (vertical) অক্ষের বিন্যাস নিয়ন্ত্রণ করে।
1. flex-start:
- ব্যাখ্যা: Flex Items গুলো Flex Container-এর শীর্ষে (উপরের দিকে) সজ্জিত হয়।
- ব্যবহার: এটি সাধারণত Flex Items-এর উল্লম্ব অক্ষে উপরের দিকে বিন্যস্ত করতে ব্যবহৃত হয়।
.flex-container {
display: flex;
align-items: flex-start; /* Flex Items শীর্ষে সজ্জিত হবে */
}
উদাহরণ:
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
.flex-container {
display: flex;
align-items: flex-start; /* শীর্ষে সজ্জিত হবে */
height: 200px;
border: 1px solid #ccc;
}
.flex-item {
background-color: teal;
color: white;
padding: 10px;
}
2. flex-end:
- ব্যাখ্যা: Flex Items গুলো Flex Container-এর নিচের দিকে (ডানে) সজ্জিত হয়।
- ব্যবহার: এটি Flex Items-এর উল্লম্ব অক্ষে নিচের দিকে সজ্জিত করতে ব্যবহৃত হয়।
.flex-container {
display: flex;
align-items: flex-end; /* Flex Items নিচে সজ্জিত হবে */
}
উদাহরণ:
.flex-container {
display: flex;
align-items: flex-end; /* নিচে সজ্জিত হবে */
height: 200px;
border: 1px solid #ccc;
}
.flex-item {
background-color: teal;
color: white;
padding: 10px;
}
3. center:
- ব্যাখ্যা: Flex Items গুলো Flex Container-এর মাঝখানে (কেন্দ্রে) সজ্জিত হয়।
- ব্যবহার: এটি Flex Items-কে উল্লম্বভাবে (vertical) এবং অনুভূমিকভাবে (horizontal) কেন্দ্রিত করার জন্য ব্যবহৃত হয়।
.flex-container {
display: flex;
align-items: center; /* Flex Items কেন্দ্রে সজ্জিত হবে */
}
উদাহরণ:
.flex-container {
display: flex;
align-items: center; /* কেন্দ্রে সজ্জিত হবে */
height: 200px;
border: 1px solid #ccc;
}
.flex-item {
background-color: teal;
color: white;
padding: 10px;
}
4. baseline:
- ব্যাখ্যা: Flex Items গুলো তাদের বেসলাইন (baseline) অনুযায়ী সজ্জিত হয়। বেসলাইন হলো টেক্সটের রেখা, যা সাধারণত সব থেকে নিচের অংশ থেকে শুরু হয়।
- ব্যবহার: যখন Flex Items-এর মধ্যে কিছু আইটেমে টেক্সট থাকে, তখন
baselineব্যবহার করে তাদের টেক্সটকে একটি রেখায় সাজানো যায়।
.flex-container {
display: flex;
align-items: baseline; /* Flex Items-এর টেক্সট বেসলাইনে সজ্জিত হবে */
}
উদাহরণ:
.flex-container {
display: flex;
align-items: baseline; /* বেসলাইনে সজ্জিত হবে */
height: 200px;
border: 1px solid #ccc;
}
.flex-item {
background-color: teal;
color: white;
padding: 10px;
font-size: 24px;
}
5. stretch (ডিফল্ট):
- ব্যাখ্যা: Flex Items গুলো Flex Container-এর পূর্ণ উচ্চতা বা প্রস্থ অনুযায়ী প্রসারিত হয়।
- ব্যবহার: এটি Flex Items-কে কন্টেইনারের পূর্ণ উচ্চতা বা প্রস্থে প্রসারিত করতে ব্যবহৃত হয়। এটি ডিফল্ট মান, যা যখন
align-itemsবাalign-selfদেওয়া না হয়, তখন Flex Items স্বয়ংক্রিয়ভাবে পূর্ণ জায়গা নেবে।
.flex-container {
display: flex;
align-items: stretch; /* Flex Items প্রসারিত হবে */
}
উদাহরণ:
.flex-container {
display: flex;
align-items: stretch; /* প্রসারিত হবে */
height: 200px;
border: 1px solid #ccc;
}
.flex-item {
background-color: teal;
color: white;
padding: 10px;
}
সারাংশ
flex-start: Flex Items কন্টেইনারের শীর্ষে সজ্জিত হবে।flex-end: Flex Items কন্টেইনারের নিচে সজ্জিত হবে।center: Flex Items কন্টেইনারের মধ্যে কেন্দ্রীভূত হবে।baseline: Flex Items টেক্সটের বেসলাইনে সজ্জিত হবে।stretch: Flex Items কন্টেইনারের পূর্ণ উচ্চতা বা প্রস্থে প্রসারিত হবে।
এই প্রপার্টিগুলি Flexbox লেআউট ডিজাইনে সঠিকভাবে উপাদানগুলোর বিন্যাস এবং স্থান ব্যবস্থাপনায় সহায়ক, বিশেষত যখন আপনি উপাদানগুলোকে উল্লম্বভাবে সজ্জিত করতে চান।
Content added By
