সিএসএস৩ ফ্লেক্সবক্স - Css3 Flexbox



1
2
3
4
5
6
7
8
9
10
11
12

ফ্লেক্সবক্স হচ্ছে সিএসএস ৩ এর একটি নতুন সুবিধা। ওয়েব পেজ লেআউট যখন বিভিন্ন সাইজের স্ক্রিন এবং বিভিন্ন ডিভাইসে প্রদর্শিত হবে তখন এলিমেন্ট গুলোকে পূর্ব নির্ধারিত নকশা অনুযায়ী প্রদর্শন করানোর জন্য সিএসএস ৩ এর ফ্লেক্সবক্স ব্যবহার করা হয়।

একটি ফ্লেক্সবক্স, ফ্লেক্স কন্টেইনার এবং ফ্লেক্স কন্টেন্ট নিয়ে গঠিত হয়। একটি কন্টেইনারকে ফ্লেক্সে রূপান্তর করতে ঐ এলিমেন্টের display প্রোপার্টির মান হিসেবে flex অথবা inline-flex নির্ধারণ করে দিতে হয়।

একটি ফ্লেক্স কন্টেইনারের মধ্যে এক বা একাধিক ফ্লেক্স কন্টেন্ট থাকতে পারে। ফ্লেক্স কন্টেন্ট ফ্লেক্স কন্টেইনারের ভিতরে লাইনে অবস্থান করে। ডিফল্ট ভাবে প্রতিটি ফ্লেক্স কনটেইনারেই একটি করে লাইন থাকে।


ফ্লেক্সবক্স লেআউট মডিউল

ফ্লেক্সবক্স লেআউট মডিউল ব্যবহারের আগে, ৪ প্রকার লেআউট মোড ছিল। এগুলো হল -
Block - ওয়েব পেজে সেকশনগুলোর জন্য,
Inline - টেক্সট এর জন্য,
Table - দ্বিমাত্রিক টেবিলে ডাটাগুলির জন্য,
Positioned - একটি উপাদানের সুনির্দিষ্ট অবস্থানের জন্য।

ফ্লেক্সবক্স লেআউট মডিউল, ফ্লোট বা পজিশনিংটি ব্যবহার না করেই একটি নমনীয় রেস্পন্সিভ লেআউট ডিজাইন করা সহজ করে তোলে।


Flexbox এলিমেন্ট

ফ্লেক্সবক্স তৈরি করতে হলে প্রথমে ফ্লেক্সবক্স কন্টেইনার তৈরি করতে হবে। নিচের সবুজ অংশটিই একটি ফ্লেক্সবক্স কন্টেইনার এবং এর অভ্যন্তরে ৩টি ফ্লেক্স আইটেম আছে।

1
2
3

এইচটিএমএল

<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>




Parent এলিমেন্ট (কন্টেনার)

ফ্লেক্সের প্রদর্শন বৈশিষ্ট্য নির্ধারণ করার মাধ্যমে অর্থাৎ display প্রপার্টির মান হিসেবে যদি flex ব্যবহার করা হয়, তবে ফ্লেক্স কন্টেনারটি আরও নমনীয় বা flexible হয়।

উদাহরণ

.flex-container {display: flex;}


flex-container প্রপার্টি গুলো হল নিম্ননরুপ -
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content


flex-direction প্রপার্টি

কোন দিকে কন্টেনার ফ্লেক্স আইটেমগুলিকে স্ট্যাক করবে তা flex-direction প্রপার্টি ব্যবহার করে নির্ধারণ করা হয়। আরও সহজ করে বলতে গেলে ফ্লেক্স কন্টেইনারের মধ্যে ফ্লেক্স এলিমেন্ট গুলোর গতিপথ flex-direction প্রোপার্টি দ্বারা নির্ধারণ করা হয়।

1
2
3

এই প্রপার্টির জন্য ৪টি মান নির্ধারণ করা জায়, এগুল হল -
column - এই মানের জন্য টেক্সট যদি অনুভূমিক হয় তবে ফ্লেক্স উল্লম্বভাবে (ওপর থেকে নীচে) অবস্থান করবে,
column-reverse - এই মানের জন্য ফ্লেক্সগুলো উল্লম্বভাবে (কিন্তু নীচ থেকে উপরে) অবস্থান করবে,
row - টেক্সটের গতিমুখ যদি উপর থেকে নিচে হয় তবে ফ্লেক্সবক্সের গতিমুখ হবে বাম থেকে ডানে। এটি ডিফল্ট ভ্যালু।
row-reverse - টেক্সটের গতিমুখ যদি বাম থেকে ডানে হয় তবে ফ্লেক্সবক্সের গতিমুখ হবে ডান থেকে বামে।

নিছে এগুলোর উদাহরন দেখুন।

উদাহরণ

flex-direction প্রপার্টির মান নির্ধারণ করা হয়েছে column, তাই ফ্লেক্সগুলো উল্লম্বভাবে (ওপর থেকে নীচে) অবস্থান করেছে।

.flex-container {
display: flex;
flex-direction: column;
}



উদাহরণ

flex-direction প্রপার্টির মান 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 প্রোপার্টি ব্যবহার করে একটি ফ্লেক্সিবল কন্টেইনারের কন্টেন্ট গুলো wrap হবে কিনা তা নির্দেশ করা হয়। flex-wrap প্রোপার্টি ভালমত বোঝার জন্য নিচের উদাহরণটি দেখুন, এখানে 12 টি ফ্লেক্স আইটেম আছে। ব্রাউজার উইন্ডোকে বারবার ছোট-বড় করে দেখুন।

1
2
3
4
5
6
7
8
9
10
11
12

flex-wrap প্রোপার্টির 3টি মান নির্ধারণ করা যায়। এগুল হল নিম্নরুপ -
nowrap - এই মানের ফলে ফ্লেক্স কন্টেন্ট গুলো wrap হবে না। এটা স্বয়ংক্রিয় বা default মান।
wrap - এই মানের ফলে, প্রয়োজন অনুসারে ফ্লেক্স কন্টেন্ট গুলো wrap হবে।
wrap-reverse - এই মানের ফলে, প্রয়োজন অনুসারে ফ্লেক্স কন্টেন্ট গুলো বিপরীত দিক থেকে wrap হবে।

নিচে এগুলোর উদাহরণ দেখুন।

উদাহরণ

প্রয়োজন অনুসারে ফ্লেক্স কন্টেন্ট গুলো wrap হবে।

.flex-container {
display: flex;
flex-wrap: wrap;
}



উদাহরণ

ফ্লেক্স কন্টেন্ট গুলো wrap হবে না।

.flex-container {
display: flex;
flex-wrap: nowrap;
}



উদাহরণ

প্রয়োজন অনুসারে ফ্লেক্স কন্টেন্ট গুলো বিপরীত দিক থেকে wrap হবে।

.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}




flex-flow প্রপার্টি

flex-flow প্রপার্টি হল flex-direction এবং flex-wrap প্রপার্টির একটি শর্টহ্যান্ড প্রপার্টি অর্থাৎ এই একটি প্রপার্টি ব্যবহার করে একই সাথে ২ টি প্রপার্টির মান নির্দিষ্ট করা যায়। নিছে একটি উদাহরণ দেখুন।

উদাহরণ

.flex-container {
display: flex;
flex-flow: row wrap;
}




justify-content প্রপার্টি

ফ্লেক্স আইটেম গুলোকে এলাইন করতে justify-content প্রপার্টি ব্যবহার করা হয়। justify-content প্রোপার্টি ব্যবহার করে একটি ফ্লেক্সিবল কন্টেইনারের সকল কন্টেন্ট গুলোকে অনুভূমিক ভাবে সাজানো যায়।

1
2
3

justify-content প্রপার্টির ৫টি ভিন ভিন্ন মান নির্ধারণ করা জায়। এগুলো হল নিম্নরুপ -

center - এই মান ফ্লেক্সবক্স গুলোকে কন্টেইনারের কেন্দ্রে স্থাপন করে।
flex-start - flex-start মানের জন্য ফ্লেক্সবক্স গুলো কন্টেইনারের প্রারম্ভে অবস্থান করে, এটা flex-start প্রপার্টির স্বয়ংক্রিয় বা default মান।
flex-end - flex-end মানের জন্য ফ্লেক্সবক্স গুলো কন্টেইনারের শেষপ্রান্তে অবস্থান করে।
space-around - space-around মানের ফলে ফ্লেক্সবক্স গুলো কন্টেইনারে লাইনের আগে, মাঝের অংশে এবং পরে স্পেস অবস্থান করে।
space-between - space-between মানের ফলে ফ্লেক্সবক্স আইটেম গুলো লাইনগুলির মধ্যবর্তী স্থানে জোড়া জোড়া করে অবস্থান করে।

নিচে একটি উদাহরণ দেখুন।

উদাহরণ

প্রপার্টির মান center নির্ধারণ করার ফলে ফ্লেক্সবক্স গুলো কন্টেইনারের কেন্দ্রে অবস্থান করছে।

.flex-container {
display: flex;
justify-content: center;
}




align-items প্রপার্টি

ফ্লেক্স আইটেম গুলকে align-items প্রপার্টি ব্যবহার করে উল্লম্বভাবে সারি করে সাজানো হয়।

1
2
3

এই উদাহরনে align-items প্রপার্টি আরও ভাল করে বোঝার জন্য আমরা 200px উছহাত্রা এর একটি কনটেইনার ব্যবহার করেছি।

center - এই মান ফ্লেক্সবক্স আইটেম গুলোকে কন্টেইনারের কেন্দ্রে স্থাপন করে।
flex-start - এই মান ফ্লেক্সবক্স আইটেম গুলোকে কন্টেইনারের ওপর বা top এ স্থাপন করে।
flex-end - এই মান ফ্লেক্সবক্স আইটেম গুলোকে কন্টেইনারের নিচে বা bottom এ স্থাপন করে।
stretch - এই মান ফ্লেক্সবক্স আইটেম গুলোকে কন্টেইনারে প্রয়োজন মত প্রসারিত করে স্থাপন করে, এটা align-items প্রপার্টির স্বয়ংক্রিয় বা default মান।
baseline - এই মান ফ্লেক্সবক্স আইটেম গুলোকে কন্টেইনারে ভিত্তিরেখা বা baseline অনুসারে করে স্থাপন করে।

নিচে একটি উদাহরণ দেখুন।

উদাহরণ

ফ্লেক্সবক্স আইটেম গুলোকে কন্টেইনারের কেন্দ্রে স্থাপিত হয়েছে।

.flex-container {
display: flex;
height: 200px;
align-items: center; }



নিচে baseline মান ব্যবহার করে একটি উদাহরণ দেখুন।

উদাহরণ

ফ্লেক্সবক্স আইটেম গুলোকে কন্টেইনারে ভিত্তিরেখা বা baseline অনুসারে করে স্থাপন হয়েছে।

.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}

নোট - উদাহরনে বিভিন্ন সাইজের ফন্ত ব্যবহার করা হয়েছে জাতে সহজেই ফ্লেক্স গুলোর ভিত্তিরেখা বা baseline এ অবস্থান চোখে পরে।

1

2

3

4



align-content প্রপার্টি

align-content প্রোপার্টি ব্যবহার করে flex-wrap প্রোপার্টিকে মোডিফাই করা জায়। align-content প্রোপার্টি অনেকটা align-items প্রোপার্টির মতই কাজ করে। তবে এক্ষেত্রে এটি ফ্লেক্স কন্টেন্টের পরিবর্তে ফ্লেক্স লাইনকে সাজায়।

1
2
3
4
5
6
7
8
9
10
11
12

align-content এর সম্ভাব্য ভ্যালু গুলো নিচে দেওয়া হলো।

center - এই মানের ফলে ফ্লেক্স লাইন গুলো কন্টেইনারের কেন্দ্রে থাকে।
stretch - এই মানের জন্য লাইন গুলো কন্টেইনারে প্রয়োজন মত প্রসারিত হয়ে স্থাপিত হয় অর্থাৎ খালি অংশ জুড়ে থাকে। এটা align-content প্রপার্টির স্বয়ংক্রিয় বা default মান।
space-between - এই মানের জন্য লাইন গুলো কন্টেইনারে গুলো জোড়া জোড়া করে অবস্থান করে।
space-around - এই মানের ফলে ফ্লেক্স লাইন গুলো আগে, মাঝের অংশে এবং পরে স্পেস সহ অবস্থান করে।
flex-start - এই মানের ফলে ফ্লেক্স লাইন গুলো কন্টেইনারের শুরুতে অবস্থান করে।
flex-end - এই মানের ফলে লাইন গুলো কন্টেইনারের শেষে অবস্থান করে।

নিম্নের উদাহরণে আমরা align-content প্রপার্টির মান হিসেবে center এর ব্যবহার দেখবো।

উদাহরণ

ফ্লেক্স লাইন গুলো কন্টেইনারের কেন্দ্রে অবস্থান করছে।

.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}




Perfect Centering

নিচের উদাহরণে আমরা একটি খুবই পরিচিত সমস্যার সমাধান করেছি। এটা হল সঠিক ভাবে কোন কন্টেন্টকে কেন্দ্রে স্থাপন করা। justify-content এবং align-items প্রপার্টির মান নির্ধারণ করেছি center, এর ফলে ফ্লেক্সবক্সটি সঠিক ভাবে কেন্দ্রে অবস্থান করছে।

1

উদাহরণ

.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}




Child এলিমেন্ট (ফ্লেক্সবক্স আইটেম)

ফ্লেক্স কন্টেইনার এর সরাসরি child এলিমেন্টগুলো স্বয়ংক্রিয়ভাবেই ফ্লেক্সবক্স হয়। এখানে সবুজ রঙের কন্টেইনার এর মধহে ৪টি সাদা রঙের যে এলিমেন্টগুলো সেগুলোই child এলিমেন্ট।

1
2
3

উদাহরণ

<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>


ফ্লেক্সবক্স আইটেম প্রপার্টি গুলো হল নিম্নরুপ -
order
flex-grow
flex-shrink
flex-basis
flex
align-self


order প্রপার্টি

order প্রপার্টি একই কনটেইনারে থাকা অন্য ফ্লেক্স আইটেম গুলোর তুলনায় নির্দিষ্ট ফ্লেক্স আইটেম এর ক্রম নির্দিষ্ট করে। order মান অবশ্যই একটি সংখ্যা হতে হবে, এর স্বয়ংক্রিয় মান হল 0.

2
4
1
3

কোডের প্রথম ফ্লেক্সটি লেআউটে প্রথম ফ্লেক্স হিসাবে প্রদর্শিত হবে না।

উদাহরণ

order প্রপার্টি, ফ্লেক্সবক্স এর ক্রম পরিবর্তন করতে পারে।

<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 প্রপার্টি নির্দিষ্ট করে দেয় যে নির্দিষ্ট ফ্লেক্স আইটেমটি বাকি ফ্লেক্সগুলোর তুলনায় কতখানি প্রসারিত হবে। এর মান অবশ্যই একটি সংখ্যা হতে হবে, এর স্বয়ংক্রিয় মান হল 0.

1
2
3

উদাহরণটি দেখুন, এখানে ৩য় টি ফ্লেক্স আইটেমটি, অন্য ২টি ফ্লেক্স আইটেমের তুলনায় ৭ গুণ প্রসারিত হয়েছে।

উদাহরণ

এখানে ৩য় ফ্লেক্সটি অন্য ফ্লেক্স গুলোর তুলনায় ৭ গুন প্রসারিত হয়েছে।

<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 7">3</div>
</div>




flex-shrink প্রপার্টি

flex-shrink প্রপার্টি নির্দিষ্ট করে যে, নির্দিষ্ট ফ্লেক্স আইটেমটি বাকি ফ্লেক্সগুলোর তুলনায় কতখানি সঙ্কুচিত হবে। এর মান অবশ্যই একটি সংখ্যা হতে হবে, এর স্বয়ংক্রিয় মান হল 1.

1
2
3
4
5
6
7

এখানে উদাহরণটি দেখুন, যেখানে ৩য় ফ্লেক্স আইটেমটি অন্য ফ্লেক্স আইটেম গুলোর মত সঙ্কুচিত হয় নি।

উদাহরণ

এখানে ৩য় ফ্লেক্স আইটেমটি অন্য ফ্লেক্সগুলোর মত সঙ্কুচিত হয় নি।

<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 প্রপার্টি কোন ফ্লেক্সবক্সের পরিবর্তনশীলতার মাঝে প্রাথমিক দৈর্ঘ্য নির্ধারণ করে।

1
2
3
4

উদাহরণ

৩য় ফ্লেক্স আইটেমটিকে সর্বোচ্চ 200px দৈর্ঘ্যের মধ্যেই পরিবর্তনশীল রাখে।

<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 প্রপার্টির একটি শর্টহ্যান্ড প্রপার্টি।

উদাহরণ

৩য় ফ্লেক্সবক্সটিকে সর্বোচ্চ 200px প্রস্থের মধ্যেই পরিবর্তনশীল রাখে এবং প্রসারিত বা সঙ্কুচিত হতে দেয় এ।

<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 প্রপার্টি ফ্লেক্সবক্স কন্টেইয়ার এর অভ্যন্তরে নির্দিষ্ট ফ্লেক্স আইটেমকে শ্রেণীবদ্ধ ভাবে সাজায়।

1
2
3
4

align-self প্রপার্টিকে আরও ভালভাবে প্রদর্শন করার জন্য নিচের উদাহরণে একটি 200px উচ্চতার একটি কন্টেইনার ব্যবহার করা হয়েছে।

উদাহরণ

কন্টেইনারের মাঝ বরাবর ৩য় ফ্লেক্স আইটেম কে শ্রেণীবদ্ধ ভাবে স্থাপন করেছে।

<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 সমর্থন করে।

29.0 11.0 22.0 10 48


সকল ফ্লেক্সবক্স প্রপার্টি

প্রপার্টি বর্ণনা
display কোন প্রকার বক্স এইচটিএমএল এলিমেন্টে ব্যবহার হবে তা নির্দিষ্ট করে।
flex-direction সহজ করে বলতে গেলে ফ্লেক্স কন্টেইনারের মধ্যে ফ্লেক্স এলিমেন্ট গুলোর গতিপথ flex-direction প্রোপার্টি দ্বারা নির্ধারণ করা হয়।
justify-content justify-content প্রোপার্টি ব্যবহার করে একটি ফ্লেক্সিবল কন্টেইনারের সকল কন্টেন্ট গুলোকে অনুভূমিক ভাবে সাজানো যায়।
align-items ফ্লেক্স আইটেম গুলকে align-items প্রপার্টি উল্লম্বভাবে সারি করে সাজায়, যখন আইটেম প্রাপ্ত সম্পুরন স্থান ব্যবহার করে না।
flex-wrap flex-wrap প্রোপার্টি ব্যবহার করে একটি ফ্লেক্সিবল কন্টেইনারের কন্টেন্ট গুলো wrap হবে কিনা তা নির্দেশ করা হয়।
align-content align-content প্রোপার্টি অনেকটা align-items প্রোপার্টির মতই কাজ করে। তবে এক্ষেত্রে এটি ফ্লেক্স কন্টেন্টের পরিবর্তে ফ্লেক্স লাইনকে সাজায়।
flex-flow flex-flow প্রপার্টি হল flex-direction এবং flex-wrap প্রপার্টির একটি শর্টহ্যান্ড প্রপার্টি
order order প্রপার্টি একই কনটেইনারে থাকা অন্য ফ্লেক্স আইটেম গুলোর তুলনায় নির্দিষ্ট ফ্লেক্স আইটেম এর ক্রম নির্দিষ্ট করে।
align-self align-self প্রপার্টি ফ্লেক্সবক্স কন্টেইয়ার এর অভ্যন্তরে নির্দিষ্ট ফ্লেক্স আইটেমকে শ্রেণীবদ্ধ ভাবে সাজায়।
flex flex প্রপার্টি হল flex-grow, flex-shrink এবং flex-basis প্রপার্টির একটি শর্টহ্যান্ড প্রপার্টি।







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.