আরো ভালোভাবে সিএসএস প্যাটার্ন তৈরি করার জন্য ফ্লেক্সবক্সের কিছু ট্রিক্স

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

আমরা হয়তোবা স্বজ্ঞানেই ভেবে থাকি যে, এজন্য আরও ভালো কোনও উপায় থাকা উচিৎ। যাই হোক, কোনও উপাদানকে লম্বালম্বিভাবে মাঝখানে প্রদর্শন করতে হলে display:table; এবং তৎসংশ্লিষ্ট স্টাইল প্রয়োগ করা বেশ আশ্চর্যজনক, যদিও এতে কাজ হয়। তাহলে, মৌলিক বিষয়ের কাজে আমরা হ্যাকসমূহ ব্যবহার করবো কেন?

দি ফ্লেক্সিবল বক্স মডিউল, অথবা সংক্ষেপে ফ্লেক্সবক্স হচ্ছে এমন একটি সমাধান, যা দিয়ে আমাদের বাড়তি ঝামেলা দূর করে এমন কিছু ডিজাইন প্যাটার্ন তৈরি করা সম্ভব যেগুলো বহুলভাবে প্রচলিত আছে। ফ্লেক্সবক্সের পিছনে মৌলিক ধারণাটি হচ্ছে এর অন্তর্গত উপাদানগুলির আকারকে পুনরায় আকার দেওয়ার অনুমতি প্রদান করা এবং যথাযথ উপায়ে কন্টেইনার/ধারককে মাপসই করার জন্য ঐ উপাদানগুলিকে পুনর্বিন্যাস করা।

বর্তমান সমর্থন

ফ্লেক্সবক্স আবশ্যিকভাবে কোনও ওয়েবসাইটে ব্যবহারের জন্য নয়। এই সমস্যা সমাধানের জন্য CSS grid spec আছে, কিন্তু দুর্ভাগ্যবশতঃ ফ্লেক্সবক্সের তুলনায় এর সমর্থন খুব কম, যা কেবল অপেরা মিনি ছাড়া আর বাকি সব ধরণের ব্রাউজারেই অন্ততঃ আংশিক সমর্থন পাচ্ছে। বিপরীতে, সিএসএস CSS grid spec কেবলমাত্র IE এর সমর্থন পাচ্ছে এবং অন্যান্য ব্রাউজারে খুব কম এবং অথবা বলতে গেলে একেবারেই কোন সাপোর্ট পাচ্ছে না।

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

আরো ভালোভাবে কেন্দ্রে আনা

ফ্লেক্সবক্সের আগে লম্বালম্বিভাবে ডাইনামিক কনটেন্ট সমূহ কেন্দ্রে আনা বেশ কষ্টসাধ্য কাজ ছিল। (স্ম্যাশিং ম্যাগাজিন এই পোস্ট এবং এই সিএসএস-ট্রিক্স রচনাটি পড়লেই সম্পূর্ণ ঘটনাটি বুঝতে পারবেন) ফ্লেক্সবক্স এর মাধ্যমে সবকিছুই সহজ হয়ে গেছে। এখন আমরা চাইল্ড এলিমেন্টসহ একটি বেসিক কন্টেইনার সেটআপ করবো।

<div class="container">
  <div class="center-all">Testing vertical center</div>
  <div class="center-all">A secondary test</div>
  <div class="center-all">Tertiary is for three</div>
</div>

আমাদের লক্ষ্য হচ্ছে এই এলিমেন্টগুলো উলম্ব ও আনুভূমিকভাবে কেন্দ্রে উপস্থাপন করা। ফ্লেক্সবক্স দিয়ে এই কাজটি নিচের মতই সহজ:

.container {
  width: 500px;
  height: 500px;
  margin: 0 auto;
  background-color: #dedede;
  /* Flex rules */
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

নোট: আমরা এখানে ভেন্ডর প্রিফিক্স ভার্শন ব্যবহার করিনি, কিন্তু আপনি অবশ্যই ব্যবহার করবেন। বিকল্প উপায় হিসেবে অটো-প্রিফিক্সারটি ব্যবহার করতে পারেন।

এই মাত্র আমরা যা করলাম

আপনি নিশ্চয় এখানে কিছু অপরিচিত রুলস দেখতে পাচ্ছেন; ফ্লেক্সবক্স হচ্ছে এমন একটি মডিউল যা বেশকিছু প্রপার্টির সমন্বয়ে গঠিত। শুরুতে display:flex দিয়ে আমরা আমাদের ফ্লেক্সবক্স কন্টেইনার তৈরি করবো এবং এগুলোর চাইল্ড এলিমেন্টসমূহ স্বয়ংক্রিয়ভাবে আইটেম হিসেবে ধরা হবে।

আমরা অন্যভাবে বিবৃত না করা পর্যন্ত, আমাদের ফ্লেক্স আইটেমগুলো প্রধান অক্ষ বরাবর সমান্তরাল ভাবে থাকবে। যদিও, flex-flow (যা flex-direction এবং flex-wrap প্রপার্টিদ্বয়ের শর্টহ্যান্ড) প্রধান ও বিপরীত অক্ষ দুটোকেই পরিবর্তন করতে সক্ষম। flex-flow: column nowrap এই কোডের মাধ্যমে, আমরা আমাদের কন্টেন্টসমূহ একটি উলম্ব কলামে প্রদর্শন করতে চাই, এবং আমরা আমাদের আইটেমসমূহ অন্য কোনও এলিমেন্টে রাখতে চাই না (যার ফলে এগুলো পরবর্তী সারিতে সরে যাবে)।

align-items: center আমাদের আইটেমগুলোকে দ্বিতীয় ("ক্রস") অক্ষ বরাবর সারিবদ্ধ করবে।

ভিজুয়াল অর্ডার বনাম কগনিশিভ অর্ডার

লেআউটের ঐতিহ্যগত পদ্ধতির সাথে এই পদ্ধতিটির একটি অন্তর্নিহিত সমস্যা রয়েছে, বিশেষ করে যখন রেস্পন্সিভ কন্টেন্ট নিয়ে কাজ করা হয়। উদাহরণস্বরূপ যখন ফ্লোট ব্যবহার করা হয় তখন একটি পেইজের কন্টেন্টের অর্ডার প্রকৃত বা স্বাভাবিক লেআউটের তুলনায় সম্পূর্ণ ভিন্ন অর্ডারে দেখা দিতে পারে।  এমনকি, কোনও পেইজের এলিমেন্টসমূহ অর্ডার অনুযায়ী নিপুণভাবে সাজানো বেশ কঠিন। ফ্লেক্সবক্স দিয়ে, আমরা এই ধরণের কস্টসাধ্য লেআউট খুব সহজেই তৈরি করতে পারবো; যেমন, উপর দিক থেকে সারিবদ্ধ, বিপরীত দিক থেকে সাজানো কিছু উপাদানসমূহ। অন্য ভাবে বললে, যেই উপাদানগুলো কোনও মার্কআপের শুরুতে দেখানোর কথা, সেগুলো স্ক্রিনের শেষের দিকে দেখাবে, এবং মার্কআপের শেষের উপাদানগুলো শুরুর দিকে দেখাবে।

আমরা এই মার্কআপটি ব্যবহার করবো:

<main>
  <div class="item">Here is the first item</div>
  <div class="item">Here is the next item</div>
  <div class="item">The third item</div>
  <div class="item">The fourth item</div>
</main>

নিচের সিএসএস দিয়ে আমরা খুব সহজেই কাঙ্খিত মার্কআপটি অর্জন করতে পারি।

main {
  position: relative;
  height: 100%;
  display: flex;
  flex-flow: column-reverse nowrap;
  justify-content: flex-end;
  align-items: center;
}

এটা আমাদের লক্ষ্য অনুযায়ী ফলাফল প্রদান করবে।  ফলাফল দেখুন (সহজে দেখার জন্য কয়েকটি অতিরিক্ত স্টাইলসহ) এখানে।

আমরা এইমাত্র যা করলাম

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

এছাড়াও আমরা align-items:center ব্যবহার করেছি যাতে আনুভুমিকভাবে আইটেমগুলো কলামের কেন্দ্রে থাকে। এটা এমন সব এলিমেন্টের সারির ক্ষেত্রে কাজে লাগবে, যেখানে কগনিশিভ অর্ডার (শুরু থেকে শেষ) ভিজুয়াল অর্ডার (উপর থেকে নিচ) এর সাথে মিলে না।

অন্যান্য অর্ডার ম্যানিপুলেশন

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

<main>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam eum repudiandae ullam ipsum repellendus officiis eaque unde aut ea porro accusamus placeat earum qui quia quidem totam harum odit voluptates?</p>
  <img src="http://lorempixel.com/200/200" alt="" />
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem provident voluptas commodi atque. Consequatur non natus earum nobis exercitationem sapiente dolorem explicabo asperiores soluta unde est voluptatibus fugit officia quo.</p>
</main>

এবং এর সাথের CSS:

main {
  display: flex;
  flex-flow: row wrap;
}
img {
  flex-grow: 1;
  width: 200px;
  order: 3;
}
p {
  flex: 1 auto;
  order: 1;
  padding: 10px;
  background-color: #dedede;
  margin: 0;
}
p:nth-child(3){
  order: 2;
  flex: 3 0 50px;
}

@media only screen and (max-width: 600px){
  img {
    order: 1;
  }
  p {
    flex: 1 auto;
    order: 2;
    padding: 10px;
    background-color: #dedede;
    margin: 0;
  }
  p:nth-child(3){
    order: 3;
    flex: 3 0 50px;
  }
}

ফ্লেক্সবক্স দিয়ে আমরা মাত্র কয়েক লাইন কোড ব্যবহার করে কি ধরণের লেআউট তৈরি করতে পারি এটা হচ্ছে তার কিঞ্চিৎ উদাহরণ, যেসব লেআউট অর্জন করা সাধারনত বেশ কষ্টসাধ্য কাজ।

তিনটি কলাম? সমস্যা নেই

তিনটি কলামকে 100/3 ভাগ করার এই অসাধ্য সাধন করতে গিয়ে আপনি কয়বার হতাশ হয়েছেন, এবং পরবর্তীতে ৯৯.৯% কলাম তৈরির পথে হেঁটেছেন তার কি কোনও ইয়ত্তা আছে, কিন্তু এটা যে একটি খারাপ সমাধান তাতে কোনও সন্দেহ নেই, তাই নয় কি? ফ্লেক্সবক্স এই সব সমস্যাই সমাধান করেছে এবং সবগুলোর ক্ষেত্রেই। নিচের মার্কআপটি ব্যবহার করুন:

<div class="container">
  <div class="column">Testing</div>
  <div class="column">Testing</div>
  <div class="column">Testing</div>
</div>

এবং নিচের সিএসএস দিয়ে আপনি সম্পূর্ণ তিনটি কলামই খুব নিখুঁত পরিমাপে প্রদর্শন করতে পারবেন।

.container {
  display: flex;
  justify-content: center;
  align-content: space-between;
  background-color: #dadada;
}
.column {
  width: 100%;
  padding: 50px;
  text-align: center;
  box-shadow: 0 0 10px #c0c0c0;
}

ছোট্ট একটি গাটার চান? সমস্যা নেই। আপনার .column ক্লাসে অল্প কিছু মার্জিন যুক্ত করুন। আপনার জন্য সঠিকভাবে স্পেসিং ঠিক করা হলো।

আরও চান?

এই অসাধারণ গিটহাব রিপো "Solved By Flexbox" টি উদাহরণস্বরূপ দেখতে পারেন। ফ্লেক্সবক্স একটি অত্যন্ত শক্তিশালী মডিউল, আমরা আশা করি, এই রচনার মাধ্যমে তাই প্রমানিত হয়েছে। ফ্লেক্সবক্সের ক্ষেত্রে আপনি অন্যান্য শক্তিশালী ও মজার আর কোন কোন ব্যবহারের ক্ষেত্র খুঁজে পেয়েছেন? নিচের কমেন্টে তা আমাদের জানাতে পারেন!