ফ্লেক্সবক্স

সিএসএস পডকাস্ট - 010: ফ্লেক্সবক্স

একটি ডিজাইন প্যাটার্ন যা প্রতিক্রিয়াশীল ডিজাইনে চতুর হতে পারে একটি সাইডবার যা কিছু বিষয়বস্তুর সাথে ইনলাইনে বসে। যেখানে ভিউপোর্ট স্থান আছে, এই প্যাটার্নটি দুর্দান্ত কাজ করে, কিন্তু যেখানে স্থান ঘনীভূত হয়, সেই অনমনীয় বিন্যাসটি সমস্যাযুক্ত হতে পারে।

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

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

আপনি একটি ফ্লেক্স লেআউট দিয়ে কি করতে পারেন?

ফ্লেক্স লেআউটগুলির নিম্নলিখিত বৈশিষ্ট্যগুলি রয়েছে, যা আপনি এই নির্দেশিকায় অন্বেষণ করতে সক্ষম হবেন৷

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

প্রধান অক্ষ এবং ক্রস অক্ষ

ফ্লেক্সবক্স বোঝার চাবিকাঠি হল একটি প্রধান অক্ষ এবং একটি ক্রস অক্ষের ধারণা বোঝা। প্রধান অক্ষ হল আপনার flex-direction বৈশিষ্ট্য দ্বারা সেট করা একটি। যদি এটি row হয় আপনার প্রধান অক্ষ সারি বরাবর, যদি এটি column হয় আপনার প্রধান অক্ষ কলাম বরাবর।

ফ্লেক্স আইটেমগুলি প্রধান অক্ষের উপর একটি গ্রুপ হিসাবে সরানো হয়। মনে রাখবেন: আমাদের কাছে একগুচ্ছ জিনিস আছে এবং আমরা একটি গোষ্ঠী হিসাবে তাদের জন্য সেরা বিন্যাস পেতে চেষ্টা করছি৷

ক্রস অক্ষটি মূল অক্ষের অন্য দিকে চলে, তাই flex-direction row হলে ক্রস অক্ষটি কলাম বরাবর চলে।

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

একটি ফ্লেক্স ধারক তৈরি করা হচ্ছে

বিভিন্ন আকারের আইটেমগুলির একটি গ্রুপ নিয়ে এবং সেগুলিকে সাজানোর জন্য ফ্লেক্সবক্স ব্যবহার করে ফ্লেক্সবক্স কীভাবে আচরণ করে তা দেখা যাক।

<div class="container" id="container">
  <div>One</div>
  <div>Item two</div>
  <div>The item we will refer to as three</div>
</div>

ফ্লেক্সবক্স ব্যবহার করার জন্য আপনাকে ঘোষণা করতে হবে যে আপনি একটি ফ্লেক্স ফরম্যাটিং প্রসঙ্গ ব্যবহার করতে চান এবং নিয়মিত ব্লক এবং ইনলাইন লেআউট নয়। display প্রপার্টির মান flex পরিবর্তন করে এটি করুন।

.container {
  display: flex;
}

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

প্রাথমিক মানগুলির মানে হল:

• আইটেম একটি সারি হিসাবে প্রদর্শন.
• তারা মোড়ানো না.
• তারা পাত্রে ভরাট বৃদ্ধি না.
• তারা কন্টেইনার শুরুতে লাইন আপ.

আইটেম দিক নিয়ন্ত্রণ

যদিও আপনি এখনও একটি flex-direction প্রপার্টি যোগ করেননি, আইটেমগুলি সারি হিসাবে প্রদর্শিত হয় কারণ flex-direction প্রাথমিক মান হল row । আপনি যদি একটি সারি চান তাহলে আপনাকে সম্পত্তি যোগ করতে হবে না। দিক পরিবর্তন করতে, বৈশিষ্ট্য এবং চারটি মানের একটি যোগ করুন:

• row : আইটেম একটি সারি হিসাবে আউট রাখা.
• row-reverse: আইটেমগুলি ফ্লেক্স কন্টেইনারের শেষ থেকে সারি হিসাবে রাখা হয়।
• column : আইটেম একটি কলাম হিসাবে রাখা.
• column-reverse : আইটেমগুলি ফ্লেক্স কন্টেইনারের শেষ থেকে একটি কলাম হিসাবে বিন্যস্ত।

আপনি নীচের ডেমোতে আমাদের আইটেমগুলির গ্রুপ ব্যবহার করে সমস্ত মান ব্যবহার করে দেখতে পারেন।

আইটেম এবং অ্যাক্সেসযোগ্যতা প্রবাহ বিপরীত

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

আপনি নিম্নলিখিত ভিডিওতে দেখতে পাচ্ছেন কিভাবে একটি বিপরীত সারির বিন্যাসে, লিঙ্কগুলির মধ্যে ট্যাবিং সংযোগ বিচ্ছিন্ন হয়ে যায় কারণ কীবোর্ড নেভিগেশনটি ভিজ্যুয়াল ডিসপ্লেকে নয় DOM অনুসরণ করে৷

ফ্লেক্সবক্স বা গ্রিডে আইটেমগুলির ক্রম পরিবর্তন করতে পারে এমন যেকোনো কিছু এই সমস্যার কারণ হতে পারে। তাই যেকোনও পুনঃক্রমের মধ্যে পুঙ্খানুপুঙ্খ পরীক্ষা অন্তর্ভুক্ত করা উচিত যাতে এটি কিছু লোকের জন্য আপনার সাইট ব্যবহার করা কঠিন করে না তোলে।

আরও তথ্যের জন্য দেখুন:

• বিষয়বস্তু পুনর্বিন্যাস
• ফ্লেক্সবক্স এবং কীবোর্ড নেভিগেশন সংযোগ বিচ্ছিন্ন

লেখার মোড এবং দিকনির্দেশনা

ফ্লেক্স আইটেম ডিফল্টভাবে একটি সারি হিসাবে আউট রাখা. একটি সারি আপনার লেখার মোড এবং স্ক্রিপ্টের দিক থেকে বাক্য প্রবাহিত হয় সেদিকে চলে। এর মানে হল যে আপনি যদি আরবীতে কাজ করেন, যার একটি ডান-থেকে-বাম (RTL) স্ক্রিপ্টের দিকনির্দেশ রয়েছে, আইটেমগুলি ডানদিকে লাইনে দাঁড়াবে। ট্যাব অর্ডার ডানদিকে শুরু হবে কারণ এভাবেই আরবীতে বাক্য পড়া হয়।

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

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

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

ফ্লেক্স আইটেম মোড়ানো

flex-wrap সম্পত্তির প্রাথমিক মান হল nowrap । এর মানে হল যে পাত্রে পর্যাপ্ত জায়গা না থাকলে আইটেমগুলি উপচে পড়বে।

প্রারম্ভিক মান ব্যবহার করে প্রদর্শন করা আইটেমগুলি ওভারফ্লো হওয়ার আগে যতটা সম্ভব ছোট min-content আকারে সঙ্কুচিত হবে।

আইটেমগুলিকে মোড়ানোর জন্য flex-wrap: wrap ।

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

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

ফ্লেক্স-ফ্লো শর্টহ্যান্ড

আপনি শর্টহ্যান্ড flex-flow ব্যবহার করে flex-direction এবং flex-wrap বৈশিষ্ট্য সেট করতে পারেন। উদাহরণস্বরূপ, column flex-direction সেট করতে এবং আইটেমগুলিকে মোড়ানোর অনুমতি দিতে:

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

ফ্লেক্স আইটেম ভিতরে স্থান নিয়ন্ত্রণ

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

• flex-grow: 0 : আইটেম বাড়বে না।
• flex-shrink: 1 : আইটেমগুলি তাদের flex-basis চেয়ে ছোট সঙ্কুচিত হতে পারে।
• flex-basis: auto : আইটেমগুলির বেস আকারের auto থাকে।

এটি flex: initial । flex শর্টহ্যান্ড প্রপার্টি, বা flex-grow , flex-shrink এবং flex-basis লংহ্যান্ডগুলি ফ্লেক্স পাত্রের বাচ্চাদের জন্য প্রয়োগ করা হয়।

আইটেমগুলিকে বাড়তে দেওয়ার জন্য, ছোট আইটেমগুলির চেয়ে বড় আইটেমগুলিকে বেশি জায়গা দেওয়ার অনুমতি দেওয়ার জন্য flex:auto ব্যবহার করুন। আপনি উপরের ডেমো ব্যবহার করে এটি চেষ্টা করতে পারেন। এটি বৈশিষ্ট্যগুলিকে সেট করে:

• flex-grow: 1 : আইটেমগুলি তাদের flex-basis চেয়ে বড় হতে পারে।
• flex-shrink: 1 : আইটেমগুলি তাদের flex-basis চেয়ে ছোট সঙ্কুচিত হতে পারে।
• flex-basis: auto : আইটেমগুলির বেস আকারের auto থাকে।

flex: auto ব্যবহার করার অর্থ হল আইটেমগুলি বিভিন্ন আকারের শেষ হবে, কারণ প্রতিটি আইটেম সর্বাধিক-সামগ্রীর আকার হিসাবে বিন্যস্ত হওয়ার পরে আইটেমগুলির মধ্যে ভাগ করা স্থান ভাগ করা হয়৷ সুতরাং একটি বড় আইটেম আরও স্থান লাভ করবে। সমস্ত আইটেমকে সামঞ্জস্যপূর্ণ আকারে হতে বাধ্য করতে এবং বিষয়বস্তুর আকার উপেক্ষা করতে ডেমোতে flex:auto থেকে flex: 1 পরিবর্তন করুন।

এটি এতে আনপ্যাক করে:

• flex-grow: 1 : আইটেমগুলি তাদের flex-basis চেয়ে বড় হতে পারে।
• flex-shrink: 1 : আইটেমগুলি তাদের flex-basis চেয়ে ছোট সঙ্কুচিত হতে পারে।
• flex-basis: 0 : আইটেমের বেস সাইজ 0 ।

flex: 1 বলে যে সমস্ত আইটেমের আকার শূন্য, তাই ফ্লেক্স পাত্রে সমস্ত স্থান বিতরণ করার জন্য উপলব্ধ। যেহেতু সমস্ত আইটেমের একটি flex-grow ফ্যাক্টর 1 থাকে সেগুলি সমানভাবে বৃদ্ধি পায় এবং স্থান সমানভাবে ভাগ করা হয়।

আইটেম বিভিন্ন হারে বৃদ্ধির অনুমতি দেয়

আপনাকে সমস্ত আইটেমকে 1 এর flex-grow ফ্যাক্টর দিতে হবে না। আপনি আপনার ফ্লেক্স আইটেমগুলিকে বিভিন্ন flex-grow ফ্যাক্টর দিতে পারেন। নীচের ডেমোতে প্রথম আইটেমের flex: 1 , দ্বিতীয় flex: 2 এবং তৃতীয় flex: 3 । এই আইটেমগুলি 0 থেকে বৃদ্ধি পাওয়ার সাথে সাথে ফ্লেক্স পাত্রে উপলব্ধ স্থানটি ছয় ভাগে ভাগ করা হয়। একটি অংশ প্রথম আইটেম, দুই অংশ দ্বিতীয়, তিন অংশ তৃতীয় দেওয়া হয়.

আপনি auto flex-basis থেকে একই জিনিস করতে পারেন, যদিও আপনাকে তিনটি মান নির্দিষ্ট করতে হবে। প্রথম মানটি হল flex-grow , দ্বিতীয়টি flex-shrink এবং তৃতীয়টি flex-basis ।

.item1 {
  flex: 1 1 auto;
}

.item2 {
  flex: 2 1 auto;
}

এটি একটি কম সাধারণ ব্যবহারের ক্ষেত্রে কারণ auto একটি flex-basis ব্যবহার করার কারণ হল ব্রাউজারকে স্থান বন্টন বের করার অনুমতি দেওয়া। আপনি যদি একটি আইটেমকে অ্যালগরিদমের সিদ্ধান্তের চেয়ে একটু বেশি বাড়াতে চান তবে এটি কার্যকর হতে পারে।

ফ্লেক্স আইটেম পুনঃক্রম

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

নীচের উদাহরণ এই ক্রম প্রদর্শন করে.

আপনার উপলব্ধি পরীক্ষা করুন

flexbox আপনার জ্ঞান পরীক্ষা করুন

ফ্লেক্সবক্স প্রান্তিককরণ ওভারভিউ

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

বৈশিষ্ট্যের সেট দুটি গ্রুপে স্থাপন করা যেতে পারে। স্থান বন্টন জন্য বৈশিষ্ট্য, এবং প্রান্তিককরণ জন্য বৈশিষ্ট্য. স্থান বিতরণকারী বৈশিষ্ট্যগুলি হল:

• justify-content : মূল অক্ষে স্থান বন্টন।
• align-content : ক্রস অক্ষের উপর স্থান বন্টন।
• place-content : উপরের উভয় বৈশিষ্ট্য সেট করার জন্য একটি সংক্ষিপ্ত বিবরণ।

ফ্লেক্সবক্সে প্রান্তিককরণের জন্য ব্যবহৃত বৈশিষ্ট্যগুলি:

• align-self : ক্রস অক্ষে একটি একক আইটেম সারিবদ্ধ করে।
• align-items : সমস্ত আইটেমকে ক্রস অক্ষে একটি গ্রুপ হিসাবে সারিবদ্ধ করে।

আপনি যদি প্রধান অক্ষে কাজ করেন তবে বৈশিষ্ট্যগুলি justify- দিয়ে শুরু হয়। ক্রস অক্ষে তারা align- দিয়ে শুরু করে।

প্রধান অক্ষের উপর স্থান বন্টন

আগে ব্যবহৃত এইচটিএমএল সহ, ফ্লেক্স আইটেমগুলি সারি হিসাবে বিছানো হয়, মূল অক্ষে স্থান থাকে। আইটেমগুলি সম্পূর্ণরূপে ফ্লেক্স পাত্রে পূরণ করার জন্য যথেষ্ট বড় নয়। ফ্লেক্স কন্টেইনারের শুরুতে আইটেমগুলি সারিবদ্ধ হয় কারণ justify-content প্রাথমিক মান হল flex-start । আইটেম শুরুতে লাইন আপ এবং কোনো অতিরিক্ত স্থান শেষে আছে.

ফ্লেক্স কন্টেইনারে justify-content প্রপার্টি যোগ করুন, এটিকে flex-end একটি মান দিন এবং আইটেমগুলি কন্টেইনারের শেষে লাইন করে এবং শুরুতে অতিরিক্ত জায়গা রাখা হয়।

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

আপনি justify-content: space-between ।

ডেমোতে কিছু মান চেষ্টা করুন এবং সম্ভাব্য মানগুলির সম্পূর্ণ সেটের জন্য MDN দেখুন ।

flex-direction: column

আপনি যদি column আপনার flex-direction পরিবর্তন করে থাকেন তাহলে justify-content কলামে কাজ করবে। কলাম হিসাবে কাজ করার সময় আপনার কন্টেইনারে অতিরিক্ত জায়গা রাখার জন্য আপনাকে আপনার পাত্রটিকে একটি height বা block-size দিতে হবে। অন্যথায় আপনার বিতরণ করার জন্য অতিরিক্ত স্থান থাকবে না।

বিভিন্ন মান চেষ্টা করুন, একটি flexbox কলাম বিন্যাস সঙ্গে এই সময়.

ফ্লেক্স লাইনের মধ্যে স্থান বিতরণ করা

একটি মোড়ানো ফ্লেক্স পাত্রে আপনার ক্রস অক্ষে বিতরণ করার জন্য স্থান থাকতে পারে। এই ক্ষেত্রে আপনি align-content প্রপার্টিটি justify-content এর মত একই মান সহ ব্যবহার করতে পারেন। justify-content বিপরীতে যা আইটেমগুলিকে ডিফল্টভাবে flex-start সারিবদ্ধ করে, align-content প্রাথমিক মান হল stretch । সেই ডিফল্ট আচরণ পরিবর্তন করতে ফ্লেক্স কন্টেইনারে প্রপার্টি align-content যোগ করুন।

.container {
  align-content: center;
}

ডেমোতে এটি ব্যবহার করে দেখুন। উদাহরণটিতে ফ্লেক্স আইটেমগুলির লাইন মোড়ানো রয়েছে এবং কন্টেইনারটিতে একটি block-size রয়েছে যাতে আমাদের কিছু অতিরিক্ত জায়গা থাকে।

place-content সংক্ষিপ্ত বিবরণ

justify-content এবং align-content উভয় সেট করতে আপনি এক বা দুটি মান সহ place-content ব্যবহার করতে পারেন। উভয় অক্ষের জন্য একটি একক মান ব্যবহার করা হবে, যদি আপনি উভয়টি নির্দিষ্ট করেন প্রথমটি align-content এর জন্য এবং দ্বিতীয়টি justify-content এর জন্য ব্যবহৃত হয়।

.container {
  place-content: space-between;
  /* sets both to space-between */
}

.container {
  place-content: center flex-end;
  /* wrapped lines on the cross axis are centered,
  on the main axis items are aligned to the end of the flex container */
}

ক্রস-অক্ষে আইটেম সারিবদ্ধ করা

ক্রস অক্ষে আপনি align-items এবং align-self ব্যবহার করে আপনার আইটেমগুলিকে ফ্লেক্স লাইনের মধ্যে সারিবদ্ধ করতে পারেন। এই প্রান্তিককরণের জন্য উপলব্ধ স্থানটি ফ্লেক্স কন্টেইনারের উচ্চতার উপর নির্ভর করবে, বা আইটেমগুলির একটি মোড়ানো সেটের ক্ষেত্রে ফ্লেক্স লাইনের উপর নির্ভর করবে।

align-self এর প্রাথমিক মান হল stretch , যার কারণে ফ্লেক্স আইটেমগুলি ডিফল্টভাবে লম্বা আইটেমের উচ্চতায় প্রসারিত হয়। এটি পরিবর্তন করতে, আপনার যেকোন ফ্লেক্স আইটেমের সাথে align-self প্রপার্টি যোগ করুন।

.container {
  display: flex;
}

.item1 {
  align-self: flex-start;
}

আইটেমটি সারিবদ্ধ করতে নিম্নলিখিত মানগুলির যেকোনো একটি ব্যবহার করুন:

• flex-start
• flex-end
• center
• stretch
• baseline

MDN-এ মানগুলির সম্পূর্ণ তালিকা দেখুন।

পরবর্তী ডেমোতে flex-direction: row । শেষ আইটেমটি ফ্লেক্স ধারকটির উচ্চতা নির্ধারণ করে। প্রথম আইটেমটিতে flex-start এর মান সহ align-self বৈশিষ্ট্য রয়েছে। ক্রস অক্ষে এটির স্থানের মধ্যে এটি কীভাবে চলে তা দেখতে সেই সম্পত্তির মান পরিবর্তন করার চেষ্টা করুন।

align-self সম্পত্তি পৃথক আইটেম প্রয়োগ করা হয়. align-items বৈশিষ্ট্য ফ্লেক্স কন্টেইনারে প্রয়োগ করা যেতে পারে সমস্ত পৃথক align-self বৈশিষ্ট্যগুলিকে একটি গ্রুপ হিসাবে সেট করতে।

.container {
  display: flex;
  align-items: flex-start;
}

এই পরবর্তী ডেমোতে একটি গ্রুপ হিসাবে ক্রস অক্ষের সমস্ত আইটেম সারিবদ্ধ করতে align-items মান পরিবর্তন করার চেষ্টা করুন।

ফ্লেক্সবক্সে কেন কোন জাস্টিফাই-সেল্ফ নেই?

ফ্লেক্স আইটেমগুলি প্রধান অক্ষের একটি গ্রুপ হিসাবে কাজ করে। সুতরাং সেই গোষ্ঠীর বাইরে একটি পৃথক আইটেমকে বিভক্ত করার কোনও ধারণা নেই।

গ্রিড লেআউটে justify-self এবং justify-items বৈশিষ্ট্যগুলি তাদের গ্রিড এলাকার মধ্যে সেই অক্ষের আইটেমগুলির প্রান্তিককরণ করতে ইনলাইন অক্ষে কাজ করে। যেভাবে ফ্লেক্স লেআউট আইটেমগুলিকে একটি গ্রুপ হিসাবে বিবেচনা করে, এই বৈশিষ্ট্যগুলি একটি ফ্লেক্স প্রসঙ্গে প্রয়োগ করা হয় না।

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

কিভাবে একটি আইটেম উল্লম্ব এবং অনুভূমিকভাবে কেন্দ্রীভূত করা যায়

প্রান্তিককরণ বৈশিষ্ট্য অন্য বাক্সের ভিতরে একটি আইটেম কেন্দ্রে ব্যবহার করা যেতে পারে। justify-content বৈশিষ্ট্য মূল অক্ষের আইটেমটিকে সারিবদ্ধ করে, যা সারি। ক্রস অক্ষের align-items বৈশিষ্ট্য।

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

আপনার উপলব্ধি পরীক্ষা করুন

flexbox আপনার জ্ঞান পরীক্ষা করুন

.container {
  display: flex;
  direction: ltr;
}

.container {
  display: flex;
  direction: ltr;
}

.container {
  display: flex;
  direction: ltr;
}

সম্পদ

• MDN CSS নমনীয় বক্স লেআউট উদাহরণ সহ বিস্তারিত গাইডের একটি সিরিজ অন্তর্ভুক্ত করে।
• ফ্লেক্সবক্সে সিএসএস ট্রিকস গাইড
• আপনি যখন একটি ফ্লেক্সবক্স ফ্লেক্স কন্টেইনার তৈরি করেন তখন কী ঘটে
• ফ্লেক্সবক্সে প্রান্তিককরণ সম্পর্কে আপনার যা কিছু জানা দরকার
• কত বড় যে নমনীয় বাক্স?
• ফ্লেক্সবক্সের জন্য কেস ব্যবহার করুন
• Chrome DevTools-এ CSS Flexbox লেআউটগুলি পরিদর্শন এবং ডিবাগ করুন