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


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

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


ফ্লেক্সবক্স কন্টেইনার

একটি ফ্লেক্সবক্স তৈরি করার জন্য প্রথমে একটি ফ্লেক্সবক্স কন্টেইনার তৈরি করতে হবে। একটি ফ্লেক্সবক্স কন্টেইনার হল একটি div এলিমেন্ট যার অভ্যন্তরে সকল flex আইটেম গুলো থাকে। নিচে একটি ব্যাবহারিক উদাহরণ দেখুন, এখানে সবুজ অংশটি হল একটি ফ্লেক্সবক্স কন্টেইনার এবং এর অভ্যন্তরে 4 টি ফ্লেক্স আইটেম আছে।

1
2
3
4

4টি flex আইটেম সহ একটি ফ্লেক্সবক্স কন্টেইনার তৈরি করার জন্য নিচের এইচটিএমএল ও সিএসএস স্টাইল কোড গুলো দেখুন।

উদাহরণ

<style>
.flex-container {
  display: flex;
  background-color: #66CC33;
  text-align: center;
  }
  
.flex-container div {
  background-color: #ffffff;
  font-size: 1.4em;
  text-align: center;
  margin: 10px;
  padding: 20px;
  }
</style>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

কোড এডিটর



ফ্লেক্সবক্স কন্টেইনার

ফ্লেক্সবক্স কন্টেইনার অর্থাৎ .flex-container নামের ক্লাস সিলেক্টর যুক্ত div এলিমেন্ট অর্থাৎ <div> ট্যাগের সাথে সিএসএস এর display প্রোপার্টির মান flex ব্যাবহার করে, সংকোচনশিল বা flexible তৈরি করা হয়।

নিচের উদাহরণে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে display প্রোপার্টি ব্যাবহার করা হয়েছে।

উদাহরণ

.flex-container {
  display: flex;
  }

কোড এডিটর


.flex-container এর সাথে যে সকল সিএসএস প্রোপার্টি ব্যাবহার করতে হয়, সে গুলো হল নিম্নরূপ।


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

ফ্লেক্সবক্সের অভ্যন্তরে ফ্লেক্স আইটেম গুলো কোন দিকে অগ্রসর হবে অর্থাৎ ফ্লেক্স কন্টেইনারের মধ্যে ফ্লেক্স এলিমেন্ট গুলোর গতিপথ নির্ধারণ করা হয় flex-direction প্রোপার্টি ব্যাবহার করে। নিচে একটি ব্যাবহারিক উদাহরণ দেখুন, যেখানে সিএসএস এর flex-direction প্রোপার্টি ব্যাবহার করা হয়েছে।

1
2
3

flex-direction প্রোপার্টির মান

flex-direction প্রোপার্টির জন্য যে সকল মান বা value নির্ধারণ যায়, সেগুলো হল নিম্নরূপ।

নিচের উদাহরণ গুলোতে কিছু সিএসএস স্টাইল কোড দেখুন,যেখানে flex-direction প্রোপার্টির বিভিন্ন মান বা value ব্যাবহার করা হয়েছে।

flex-direction: column;

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

flex-direction প্রোপার্টির মান column ব্যাবহার করে নিচে উদাহরণে কিছু সিএসএস স্টাইল কোড দেখুন।

উদাহরণ

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

কোড এডিটর


flex-direction: column-reverse;

flex-direction প্রপার্টির মান column-reverse নির্ধারণ করার ফলে ফ্লেক্স আইটেম গুলো উল্লম্ব বা vertical ভাবে (কিন্তু নীচ থেকে উপরে) অবস্থান করবে।

flex-direction প্রপার্টির মান column-reverse নির্ধারণ করে নিচের উদাহরণে কিছু সিএসএস স্টাইল কোড দেখুন।

উদাহরণ

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

কোড এডিটর


flex-direction: row;

flex-direction প্রোপার্টির মান row নির্ধারণ করার ফলে ফ্লেক্স আইটেম গুলো আনুভূমিক বা horizontal ভাবে (বাম থেকে ডানে) অবস্থান করবে।

flex-direction প্রোপার্টির মান row ব্যাবহার করে নিচের উদাহরণে কিছু সিএসএস স্টাইল কোড দেখুন।

উদাহরণ

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

কোড এডিটর


flex-direction: row-reverse;

flex-direction প্রোপার্টির মান বা value, row-reverse নির্ধারণ করার ফলে ফ্লেক্স আইটেম গুলো আনুভূমিক বা horizontal ভাবে (কিন্তু ডান থেকে বামে) অবস্থান করবে।

flex-direction প্রোপার্টির মান বা value, row-reverse ভাবহার করে নিচের উদাহরণে কিছু সিএসএস স্টাইল কোড দেখুন।

উদাহরণ

.flex-container {
  display: flex;
  flex-direction: row-reverse;
  }

কোড এডিটর



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

ফ্লেক্সিবল কন্টেইনারের অভ্যন্তরের কন্টেন্ট গুলো অর্থাৎ ফ্লেক্স আইটেম গুলো wrap হবে কিনা তা নির্ধারণ করার জন্য সিএসএস এর 3.0 সংস্করণে যুক্ত flex-wrap প্রোপার্টি ব্যবহার করা হয়।

flex-wrap প্রোপার্টি ভালমত বোঝার জন্য নিচের ব্যাবহারিক উদাহরণটি দেখুন, এখানে 12 টি ফ্লেক্স আইটেম আছে। ব্রাউজার উইন্ডোকে বারবার ছোট-বড় করে এর ফলাফল দেখুন।

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

flex-wrap প্রোপার্টিতে 3টি মান ব্যাবহার করা যায়। এগুলো হল নিম্নরুপ।

এই মান গুলো ব্যাবহার করে নিচে উদাহরণ দেখুন।

flex-wrap: wrap

flex-wrap প্রোপার্টির মান বা value, wrap ব্যাবহার করা হলে প্রয়োজন অনুসারে ফ্লেক্স আইটেম গুলো wrap হবে।

flex-wrap প্রোপার্টির মান বা value, wrap ব্যাবহার করে নিচে কিছু সিএসএসস্টাইল কোড দেখুন।

উদাহরণ

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

কোড এডিটর


flex-wrap: nowrap;

flex-wrap প্রোপার্টিতে nowrap মান বা value ব্যাবহার করার ফলে, ফ্লেক্স আইটেম বা কন্টেন্ট গুলো wrap হবে না।

flex-wrap প্রোপার্টিতে nowrap মান বা value ব্যাবহার করে নিচে একটি উদাহরণ দেখুন।

উদাহরণ

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

কোড এডিটর


flex-wrap: wrap-reverse;

flex-wrap প্রোপার্টিতে wrap-reverse মান বা value ব্যাবহার করার ফলে, ফ্লেক্স আইটেম বা কন্টেন্ট গুলো বিপরীত দিক থেকে wrap হবে।

flex-wrap প্রোপার্টিতে wrap-reverse মান বা value ব্যাবহার করে নিচে কিছু সিএসএস স্টাইল কোড দেখুন।

উদাহরণ

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

কোড এডিটর



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

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

flex-flow শর্টহ্যান্ড প্রোপার্টি ব্যাবহার করে নিচে কিছু সিএসএস স্টাইল কোড দেখুন।

উদাহরণ

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

কোড এডিটর



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

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

1
2
3

নিচে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে সিএসএস এর justify-content প্রোপার্টি ব্যাবহার করা হয়েছে। এখানে প্রপার্টির মান center নির্ধারণ করার ফলে ফ্লেক্সবক্স গুলো কন্টেইনারের কেন্দ্রে অবস্থান করছে।

উদাহরণ

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

কোড এডিটর


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


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

align-items প্রোপার্টি ব্যাবহার করে, ফ্লেক্স আইটেম গুলোকে উলম্ব বা vertical ভাবে সারি করে সাজান যায়। নিচে এর ব্যাবহারিক উদাহরণ দেখুন। এখানে align-items প্রোপার্টি আরও ভাল করে বোঝার জন্য আমরা 200px উচ্ছতা বা height এর একটি কনটেইনার ব্যবহার করেছি।

1
2
3

align-items প্রোপার্টিতে যেসকল মান বা value ব্যাবহার করা যায় সেগুলো হল নিম্নরূপ।

align-items: center;

align-items প্রোপার্টিতে মান বা value রূপে center ব্যাবহার করে নিচে কিছু সিএসএস স্টাইল কোড দেখুন।

উদাহরণ

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

কোড এডিটর


align-items: baseline;

align-items প্রোপার্টিতে মান বা value রূপে baseline ব্যাবহার করে নিচে একটি ব্যাবহারিক উদাহরণ দেখুন।

1

2

3

4

align-items প্রোপার্টিতে মান বা value রূপে baseline ব্যাবহার করে নিচে কিছু সিএসএস স্টাইল কোড দেখুন।

উদাহরণ

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

কোড এডিটর


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

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

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

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

সিএসএস এর align-content প্রোপার্টিতে যে সকল মান বা value ব্যাবহার করা যায়, সেগুলো হল নিম্মরুপ।

নিচের উদাহরণে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে align-content প্রপার্টির মান হিসেবে center এর ব্যবহার করা হয়েছে। এর ফলে ফ্লেক্স লাইন গুলো কন্টেইনারের কেন্দ্রে অবস্থান করছে।

উদাহরণ

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

কোড এডিটর



কেন্দ্রে প্রদর্শন

কোন এইচটিএমএল কন্টেন্টকে যে কোন অবস্থায় ওয়েব পেজের মাঝখানে প্রদর্শন করা বেশ কষ্টসাধ্য কাজ। সিএসএস এর justify-content এবং align-items প্রোপার্টি ব্যাবহার করে একটি ফ্লেক্স আইটেমকে ওয়েব পেজের কেন্দ্রে প্রদর্শন করা হয়েছে। নিচে এর একটি ব্যাবহারিক উদাহরণ দেখুন।

1

উপরের উদাহরণের জন্য নিচের সিএসএস স্টাইল কোড গুলো দেখুন, যেখানে সিএসএস এর justify-content এবং align-items প্রোপার্টির মান বা value নির্ধারণ করা হয়েছে center.

উদাহরণ

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

কোড এডিটর



ফ্লেক্সবক্স আইটেম

ফ্লেক্স কন্টেইনার এর অভ্যন্তরে সকল এইচটিএমএল এলিমেন্ট গুলোই ফ্লেক্সবক্স আইটেম। নিচের ব্যাবহারিক উদাহরণে সবুজ রঙের কন্টেইনার এর মধ্যস্থিত ৪টি সাদা রঙের যে এলিমেন্ট গুলো সেগুলোই ফ্লেক্সবক্স আইটেম।

1
2
3
4

ওপরের উদাহরণের জন্য নিচের এইচটিএমএল কোড গুলো দেখুন। এখানে flex-container নামের ক্লাস যুক্ত div এলিমেন্ট এর অভ্যন্তরে সকল div এলিমেন্ট গুলোই ফ্লেক্স আইটেম।

উদাহরণ

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

কোড এডিটর


ফ্লেক্সবক্স আইটেম প্রোপার্টি

সিএসএস 3.0 সংস্করণের যে সকল প্রোপার্টি ফ্লেক্সবক্স আইটেম এর জন্য ব্যাবহার করা হয়, সেগুলো হল নিম্মনরুপ।


order প্রোপার্টি

একই ফ্লেক্স কনটেইনারে থাকা অন্য ফ্লেক্স আইটেম গুলোর তুলনায় নির্দিষ্ট ফ্লেক্স আইটেম এর ক্রম নির্দিষ্ট করতে সিএসএস এর order প্রোপার্টি ব্যাবহার করা হয়। এই প্রোপার্টির মান কোন সংখ্যা দ্বারা নির্ধারিত হয়। এই প্রোপার্টির পূর্ব-নির্ধারিত বা default মান হল 0. নিচে এর একটি ব্যাবহারিক উদাহরণ দেখুন, যেখানে order প্রোপার্টিতে নির্ধারিত মান অনুসারে ফ্লেক্স আইটেম গুলো অবস্থান নিয়েছে।

2
4
1
3

ওপরের ব্যাবহারিক উদাহরণের জন্য নিচের এইচটিএমএল কোড গুলো দেখুন।

উদাহরণ

<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 প্রোপার্টি ব্যাবহার করা হয়। এই প্রোপার্টির মান কোন সংখ্যা দ্বারা নির্ধারিত হয় এবং এই এর পূর্ব-নির্ধারিত বা default মান হল 0.

নিচে এর একটি ব্যাবহারিক উদাহরণ দেখুন, যেখানে flex-grow প্রোপার্টি ব্যাবহার করা হয়েছে।

1
2
3

ওপরের ব্যাবহারিক উদাহরণের জন্য নিচের এইচটিএমএল কোড গুলো দেখুন, যেখানে সিএসএস এর flex-grow প্রোপার্টি ব্যাবহার করা হয়েছে।

উদাহরণ

<div class="flex-container08">
  <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 প্রোপার্টি ব্যাবহার করে। এই প্রোপার্টির মান কোন সংখ্যা দ্বারা নির্ধারিত হয় এবং এই এর পূর্ব-নির্ধারিত বা default মান হল 1.

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

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>

কোড এডিটর



flex-basis প্রোপার্টি

এই প্রোপার্টি সিএসএস এর max-width প্রোপার্টির মত কাজ করে অর্থাৎ flex-basis প্রোপার্টি ব্যাবহার করে কোন ফ্লেক্স আইটেম সর্বোচ্ছ কতটুকু প্রসারিত হতে পারে তা নির্ধারণ করা যায়। কোন ফ্লেক্স আইটেম এর পরিবর্তনশীলতার মাঝে প্রাথমিক দৈর্ঘ্য নির্ধারণ করা যায় সিএসএস এর flex-basis প্রোপার্টি ব্যাবহার করে।

flex-basis প্রোপার্টি ব্যাবহার করে নিচে একটি ব্যাবহারিক উদাহরণ দেখুন।

1
2
3
4

ওপরের ব্যাবহারিক উদাহরণটির জন্য নিচে কিছু এইচটিএমএল কোড দেখুন, যেখানে flex-basis প্রোপার্টি ব্যাবহার করা হয়েছে।

উদাহরণ

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

কোড এডিটর



flex প্রোপার্টি

flex-grow, flex-shrink এবং flex-basis প্রোপার্টির শর্টহ্যান্ড হল flex প্রোপার্টি। এই সকল প্রোপার্টির মান বা value গুলো flex প্রোপার্টিতে ধারাবাহিক ভাবে উল্লেখ করতে হয়।

নিচে একটি উদাহরণ দেখুন, যেখানে সিএসএস এর flex প্রোপার্টি ব্যাবহার করা হয়েছে, এক্ষেত্রে ব্রাউজার ৩য় ফ্লেক্স আইটেমটিকে সর্বোচ্চ 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 প্রোপার্টিতে যে সকল মান বা value ব্যাবহার করা যায় সেগুলো হল নিম্নরূপ।

align-self প্রোপার্টি ব্যাবহার করে নিচে একটি উদাহরণ দেখুন, যেখানে ২য় ফ্লেক্সবক্সটিকে কন্টেইনারের ওপরদিকে এবং ৩য় ফ্লেক্সবক্সটিকে কন্টেইনারের নিচদিকে স্থাপন করা হয়েছে।

উদাহরণ

<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>

কোড এডিটর



ব্রাউজার সমর্থন

টেবিলে দেয়া রোগুলোর প্রথম লাইন ব্রাউজারের সেই প্রথম সংস্করণ বা version নির্দেশ করে যেগুলো পুরোপুরি এই প্রপার্টি সমর্থন করে।

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