X

X

X

CSS3 ফ্লেক্সিবল বক্স


CSS3 ফ্লেক্সিবল বক্স

Flexible boxe বা flexbox, CSS3 তে যুক্ত একটি নতুন লেআউট মুড। কোনো ওয়েবপেজকে নিখুতভাবে রেসপনসিভ করার জন্য ফ্লেক্সবক্স খুবই গুরুত্বপূর্ণ। বিভিন্ন স্ক্রিন পেজ লেআউটকে সুন্দরভাবে উপস্থাপণ করার জন্য মূলত এটি ব্যবহৃত হয়। আজকাল অধিকাংশ ওয়েবএপ্লিকেশন লেআউট ব্যবহার করার ক্ষেত্রে ফ্লেক্সবক্স মডেল ব্যবহার করা হয়। কেননা এটি সাধারণ ব্লক মডেলের চাইতে অধিক কার্যকরী। এটিতে floats প্রপার্টি ব্যবহার করার প্রয়োজন পরে না। মার্জিন ও প্যাডিং ব্যবহারের ক্ষেত্রেও অনেক সুবিধা পাওয়া যায়। তাহলে আসুন এবার এর বিস্তারিত জেনে নেই।


ব্রাউজার সাপোর্ট

Property
Basic support
(single-line flexbox)
29.0
21.0 -webkit-
11.0 22.0
18.0 -moz-
6.1 -webkit- 12.1 -webkit-
Multi-line flexbox 29.0
21.0 -webkit-
11.0 28.0 6.1 -webkit- 17.0
15.0 -webkit-
12.1

CSS3 Flexbox এর ধারণা

Flexbox দুটি মূল উপাদান দিয়ে গঠিত। যথা- flex container ও flex item ।

যেকোনো ব্লক লেভেল বা ইনলাইন লেভেল ইলামেন্টকে ফ্লেক্স কন্টেইনার হিসেবে ব্যবহার করা যায়। এক্ষত্রে উক্ত ইলামেন্টকে ফ্লেক্স কন্টেইনার হিসেবে বর্ণনা করার জন্য display property এর মান হয় flex (block লেভেল ইলামেন্ট হিসেবে বর্ণনা করা হয়) অথবা inline-flex (inline ইলামেন্ট হিসেবে বর্ণনা করা হয়) নির্ধারণ করতে হবে।

যেকোনো flex container এর ভিতরে এক বা একাধিক ফ্লেক্স আউটেম থাকতে পারে।

লক্ষ্যনীয়: flex container এর বাইরের সব ইলামেন্ট তাদের স্বাভাবিক রেন্ডার বৈশিষ্ট্য অনুযায়ী উপস্থাপিত হয়। আবার ফ্লেক্স আউটমের ভেতরের সব ইলামেন্টও স্বাভাবিক রেন্ডার বৈশিষ্ট্য অনুযায়ী উপস্থাপিত হয়। Flexbox এর মাধ্যমে বর্ণনা করা হয়, ফ্লেক্স কন্টেইনারের ভিতরে তার ফ্লেক্স আইটেমগুলো কিভাবে কাঙ্খিত লেআউট অনুযায়ী উপস্থাপিত হবে।

ফ্লেক্স আইটেমসমূহ কন্টেইনারের ভেতরে ফ্লেক্স লাইন বরাবর উপস্থাপিত হয়। সাধারণত প্রতিটি ফ্লেক্স কন্টেইনারের একটি করে ফ্লেক্স লাইন থাকে।

নিচের উদাহরণে তিনটিflex item রয়েছে। তারা স্বাভাবিকভাবে horizontal flex line অনুযায়ী বাম থেকে ডানে উপস্থাপিত হয়েছে:

Code Example

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>

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

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

মনে রাখবেন flex line দিক পরিবর্তন করা সম্ভব।

এখন যদি direction property এর মান rtl (right-to-left) সেট করা হয়, তবে টেক্সট ডান থেকে বামে উপস্থাপিত হবে এবং পেজ লেআউটও সেই অনুযায়ী পরিবর্তিত হবে:

Code Example

<style>
body {
  direction: rtl;
}

.flex-container {
  display: -webkit-flex;
  display: flex;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Flex Direction

flex-direction property ব্যবহার করে ফ্লেক্স কন্টেইনারের ভিতরে ফ্লেক্স আইটেমের দিক নির্ধারণকরা হয়। সাধারণ অবস্থায়, flex-direction এর দিক হচ্ছে row (left-to-right, top-to-bottom) ।

অন্যান্য মানগুলো হলো:

  • row-reverse
  • column
  • column-reverse

নিচের উদাহরণে row-reverse এর ফলাফল দেখানো হলো:

Code Example

<style> 
.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

নিচের উদহারণে column এর ফলাফল দেখানো হলো:

Code Example

<style> 
.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

নিচের উদাহরণে column-reverse এর ফলাফল দেখানো হলো:

Code Example

<style> 
.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


justify-content Property

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

সম্ভাব্য মানসমূহ নিম্নরূপ:

  • flex-start – Default value. container শুরু হতে আইটেমগুলো উপস্থাপিত হয়।
  • flex-end – container এর শেষ হতে আইটেমগুলো উপস্থাপিত হয়।
  • center – container এর কেন্দ্রে আইটেমগুলো উপস্থাপিত হয়।
  • space-between – লাইনসমূহের মধ্যবর্তী ফাঁকা জায়গায় আইটেমগুলো উপস্থাপিত হয়।
  • space-around – লাইনসমূহের আগে, মধ্যবর্তী ফাঁকা জায়গা এবং শেষে উপস্থাপিত হয়।

flex-end এর ফলাফল:

Code Example

<style> 
.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

center এর ফলাফল:

Code Example

<style> 
.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

space-between এর ফলাফল:

Code Example

<style> 
.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

space-around এর ফলাফল:

Code Example

<style> 
.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


align-items Property

align-items property ব্যবহার করে flexible container এর আইটেমগুলোকে vertically align করা হয় যখন আইটেসহুলো cross-axis বরাবর পুরো জায়গা ধারণ করে না।

সম্ভাব্য মানগুলোকে নিজে উল্লেখ্য করা হলো:

  • stretch – ডিফল্ট মান। আইটেমসমূহ কন্টেইনারের পুরো জায়গা ধারণ করার জন্য প্রয়োজন অনুযায়ী সম্প্রসারিত বা সংকোচিত হয়।
  • flex-start – আইটেমসমূহ কন্টেইনারের উপরে উপস্থাপিত হয়।
  • flex-end – আইটেমসমূহ কন্টেইনারের নিচে উপস্থাপিত হয়।
  • center – আইটেমসমূহ কন্টেইনারের কেন্দ্রে লম্বিক বরাবর উপস্থাপিত হয়।
  • baseline – আইটেমসমূহ কন্টেইনারের বেসলাইন বরাবর উপস্থাপিত হয়।

stretch মানের জন্য উদাহরণ:

Code Example

<style> 
.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: stretch;
  align-items: stretch;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  margin: 10px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

flex-start মানের জন্য উদাহরণ:

Code Example

<style> 
.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  margin: 10px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

flex-end মানের জন্য উদাহরণ:

Code Example

<style> 
.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  margin: 10px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

center মানের জন্য উদাহরণ:

Code Example

<style> 
.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  margin: 10px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

baseline মানের জন্য উদাহরণ:

Code Example

<style> 
.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: baseline;
  align-items: baseline;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  margin: 10px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


flex-wrap Property

ফ্লেক্স আইটেমসমূহ যখন অনেক দীর্ঘ হবে তখন wrap (ভেঙে পরের লাইনে যাওয়া) কি হবে না তা বর্ণনা করার জন্য flex-wrap property ব্যবহার করা হয়।

সম্ভাব্য মানসমূহকে নিচে উল্লেখ্য করা হলো:

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

nowrap মানের জন্য উদাহরণ:

Code Example

<style> 
.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  width: 300px;
  height: 250px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

wrap মানের জন্য উদাহরণ:

Code Example

<style> 
.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 300px;
  height: 250px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

wrap-reverse মানের জন্য উদাহরণ:

Code Example

<style> 
.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
  width: 300px;
  height: 250px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


align-content Property

align-content property flex-wrap property এর স্বাভাবিক আচরণের পরিবর্তন করে। এটি align-items এর অনুরূপ, কিন্তু এটি ফ্লেক্স আইটেম এলাইন করার পরিবর্তে ফ্লেক্স লাইন এলাইন করে।

সম্ভাব্য মানসমূহ নিম্নরূপ:

  • stretch – ডিফল্ট মান। লাইনসমূহ পুরো প্রাপ্ত জায়গা বরাবর বিস্তৃত হয়।
  • flex-start – লাইনসমূহ ফ্লেক্স কন্টেইনারের শুরুর দিকে বিস্তৃত হয়।
  • flex-end – লাইনসমূহ ফ্লেক্স কন্টেইনারের শেষের দিকে বিস্তৃত হয়।
  • center – লাইনসমূহ ফ্লেক্স কন্টেইনারের কেন্দ্রের দিকে বিস্তৃত হয়।
  • space-between – Lines are evenly distributed in the flex container
  • space-around – Lines are evenly distributed in the flex container, with half-size spaces on either end

center মানের জন্য উদাহরণ:

Code Example

<style> 
.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-content: center;
  align-content: center;
  width: 300px;
  height: 300px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Flex Item এর Property সমূহ

Ordering

কোনো কন্টেইনারের ভিতরে কোনো আইটেমের অবস্থানক্রম বর্ণনা করার জন্য order property ব্যবহৃত হয়।:

Code Example

<style> 
.flex-container {
  display: -webkit-flex;
  display: flex;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  height: 100px;
  margin: 10px;
}

.first {
  -webkit-order: -1;
  order: -1;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

Margin

margin: auto; সেট করার ফলে অতিরিক্ত ফাঁকা জায়গা বিলুপ্ত হবে। এটি দিয়ে ফ্লেক্স আইটেমসমূহকে বিভিন্ন অবস্থানে উপস্থাপণ করা যায়।

margin-right: auto; এর ফলাফল:

Code Example

<style> 
.flex-container {
  display: -webkit-flex;
  display: flex;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  width: 75px;
  height: 75px;
  margin: 10px;
}

.flex-item:first-child {
  margin-right: auto;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

সঠিকভাবে কেন্দ্রে উপস্থাপণ

ওয়েব ডিজাইনাররা তাদের জীবনের কোনো না কোনো সময় কোনো ইলামেন্টকে সঠিকভাবে কেন্দ্রে উপস্থাপণ করার সময় অবশ্যই সমস্যায় পরে থাকেন। সঠিক নিয়ম না জানলে এটি খুবই কঠিন একটি কাজ। নিচে এই সমস্যার সমাধান উল্লেখ্য করা হলো:

ফ্লেক্সবক্স ব্যবহার করে এটি খুব সহজে সমাধান করা যায়। margin: auto; সেট করলে আইটেমসমূহ সঠিকভাবে কেন্দ্রে উপস্থাপিত হবে:

Code Example

<style> 
.flex-container {
  display: -webkit-flex;
  display: flex;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  width: 75px;
  height: 75px;
  margin: auto;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

align-self

align-self property কোনো আইটেমের উপর প্রয়োগ করা হলে তা এর প্যারেন্ট কন্টেইনার হতে প্রাপ্ত ডিফল্ট এলাইন মানের পরিবর্তন ঘটায়।

বিস্তারিত জানার জন্য নিচের উদাহরণটি দেখুন:

Code Example

<style> 
.flex-container {
  display: -webkit-flex;
  display: flex;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  width: 60px;
  min-height: 100px;
  margin: 10px;
}

.item1 {
  -webkit-align-self: flex-start;
  align-self: flex-start;
}
.item2 {
  -webkit-align-self: flex-end;
  align-self: flex-end;
}

.item3 {
  -webkit-align-self: center;
  align-self: center;
}

.item4 {
  -webkit-align-self: baseline;
  align-self: baseline;
}

.item5 {
  -webkit-align-self: stretch;
  align-self: stretch;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

flex

কোনো ফ্লেক্স আইটেমের length বর্ণনা করার জন্য flex property ব্যবহৃত হয়। কন্টেইনারের ভিতরের আইটেমগুলোর দৈর্ঘ্য পরস্পরের সাথে সম্পর্কযুক্ত এবং তাদের কারে নির্দিষ্ট মান নেই। এটি একটি আনুপাতিক মান।

নিচের উদহারণে প্রথম আইটেমটি পুরো জায়গার ২/৪ অংশ , অপর দুটি আইটেম ১/৪ অংশ দখল করবে:

Code Example

<style> 
.flex-container {
  display: -webkit-flex;
  display: flex;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  margin: 10px;
}

.item1 {
  -webkit-flex: 2;
  flex: 2;
}

.item2 {
  -webkit-flex: 1;
  flex: 1;
}

.item3 {
  -webkit-flex: 1;
  flex: 1;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


CSS3 Flexbox এর Property সমূহ

প্রপার্টি বর্ণনা
display কোনো HTML element এর উপস্থাপণ ধরণ বর্ণনা করা হয়।
flex-direction কোনো flex container এর আইটেমসমূহের প্রবাহ দিক নির্ধারণ করার জন্য ব্যবহৃত হয়।
justify-content Horizontally aligns the flex items when the items do not use all available space on the main-axis
align-items Vertically aligns the flex items when the items do not use all available space on the cross-axis
flex-wrap Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line
align-content Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines
flex-flow A shorthand property for flex-direction and flex-wrap
order Specifies the order of a flexible item relative to the rest of the flex items inside the same container
align-self Used on flex items. Overrides the container’s align-items property
flex Specifies the length of a flex item, relative to the rest of the flex items inside the same container