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

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

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

একটি ফ্লেক্সবক্স তৈরি করার জন্য প্রথমে একটি ফ্লেক্সবক্স কন্টেইনার তৈরি করতে হবে। একটি ফ্লেক্সবক্স কন্টেইনার হল একটি div এলিমেন্ট যার অভ্যন্তরে সকল flex আইটেম গুলো থাকে। নিচে একটি ব্যাবহারিক উদাহরণ দেখুন, এখানে সবুজ অংশটি হল একটি ফ্লেক্সবক্স কন্টেইনার এবং এর অভ্যন্তরে 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-wrap
• flex-flow
• justify-content
• align-items
• align-content

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

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

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

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

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

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

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 টি ফ্লেক্স আইটেম আছে। ব্রাউজার উইন্ডোকে বারবার ছোট-বড় করে এর ফলাফল দেখুন।

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

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

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

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 ভাবে সাজানো যায়।

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

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

কোড এডিটর

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

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

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

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

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

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

align-items: center;

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

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

কোড এডিটর

align-items: baseline;

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

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

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

কোড এডিটর

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

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

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

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

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

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

কোড এডিটর

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

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

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

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

কোড এডিটর

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

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

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

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

কোড এডিটর

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

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

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

order প্রোপার্টি

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

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

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

<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 প্রোপার্টি ব্যাবহার করে নিচে একটি ব্যাবহারিক উদাহরণ দেখুন।

ওপরের ব্যাবহারিক উদাহরণটির জন্য নিচে কিছু এইচটিএমএল কোড দেখুন, যেখানে 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 প্রোপার্টি ব্যাবহার করা হয়।

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

• auto -
• stretch -
• center -
• flex-start -
• flex-end -
• baseline -
• initial -
• inherit -

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 নির্দেশ করে যেগুলো পুরোপুরি এই প্রপার্টি সমর্থন করে।

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