ফ্লেক্সবক্সে কীভাবে উপাদানগুলি উল্লম্বভাবে এবং অনুভূমিকভাবে কেন্দ্র করবেন
নীচে দুটি সাধারণ কেন্দ্রিক সমাধান রয়েছে।
একটি উল্লম্ব-সারিবদ্ধ ফ্লেক্স আইটেমগুলির জন্য ( flex-direction: column) এবং অন্যটি অনুভূমিকভাবে প্রান্তিকৃত ফ্লেক্স আইটেমগুলির জন্য ( flex-direction: row)।
উভয় ক্ষেত্রে কেন্দ্রিক ডিভগুলির উচ্চতা পরিবর্তনশীল, অপরিজ্ঞাত, অজানা, যাই হোক না কেন হতে পারে। কেন্দ্রিক ডিভগুলির উচ্চতা কোনও বিষয় নয়।
উভয়ের জন্য এইচটিএমএল:
<div id="container"><!-- flex container -->
<div class="box" id="bluebox"><!-- flex item -->
<p>DIV #1</p>
</div>
<div class="box" id="redbox"><!-- flex item -->
<p>DIV #2</p>
</div>
</div>
সিএসএস (আলংকারিক শৈলীগুলি বাদ দিয়ে)
যখন ফ্লেক্স আইটেমগুলি উল্লম্বভাবে স্ট্যাক করা হয়:
#container {
display: flex; /* establish flex container */
flex-direction: column; /* make main axis vertical */
justify-content: center; /* center items vertically, in this case */
align-items: center; /* center items horizontally, in this case */
height: 300px;
}
.box {
width: 300px;
margin: 5px;
text-align: center; /* will center text in <p>, which is not a flex item */
}
ডেমো
যখন ফ্লেক্স আইটেমগুলি অনুভূমিকভাবে সজ্জিত করা হয়:
flex-directionউপরের কোড থেকে নিয়ম সামঞ্জস্য করুন ।
#container {
display: flex;
flex-direction: row; /* make main axis horizontal (default setting) */
justify-content: center; /* center items horizontally, in this case */
align-items: center; /* center items vertically, in this case */
height: 300px;
}
ডেমো
ফ্লেক্স আইটেমগুলির বিষয়বস্তু কেন্দ্র করে
একটি ফ্লেক্স ফর্ম্যাটিং প্রসঙ্গের সুযোগটি পিতা-মাতার সম্পর্কের মধ্যে সীমাবদ্ধ। বাচ্চাদের বাইরে একটি ফ্লেক্স ধারকের বংশধররা ফ্লেক্স বিন্যাসে অংশ নেন না এবং ফ্লেক্স বৈশিষ্ট্যগুলি উপেক্ষা করবেন। মূলত, নমনীয় বৈশিষ্ট্যগুলি শিশুদের বাইরে উত্তরাধিকারসূত্রে হয় না।
অতএব, সন্তানের ফ্লেক্স বৈশিষ্ট্য প্রয়োগ করার জন্য আপনাকে সর্বদা আবেদন করতে হবে display: flexবা display: inline-flexকোনও পিতামাতার উপাদান প্রয়োগ করতে হবে ।
উল্লম্বভাবে এবং / অথবা অনুভূমিকভাবে পাঠ্য বা কোনও ফ্লেক্স আইটেমে থাকা অন্যান্য সামগ্রীকে কেন্দ্র করে, আইটেমটিকে একটি (নেস্টেড) নমনীয় ধারক করুন এবং কেন্দ্রীকরণের নিয়মগুলি পুনরাবৃত্তি করুন।
.box {
display: flex;
justify-content: center;
align-items: center; /* for single line flex container */
align-content: center; /* for multi-line flex container */
}
আরও বিশদ এখানে: কীভাবে একটি ফ্লেক্সবক্সের ভিতরে উল্লম্বভাবে পাঠ্য সারিবদ্ধ করবেন?
বিকল্পভাবে, আপনি margin: autoফ্লেক্স আইটেমের উপাদান উপাদান প্রয়োগ করতে পারেন ।
p { margin: auto; }
autoএখানে ফ্লেক্স মার্জিন সম্পর্কে জানুন : ফ্লেক্স আইটেমগুলি সারিবদ্ধ করার পদ্ধতি (বক্স # 56 দেখুন)।
ফ্লেক্স আইটেমগুলির একাধিক লাইন কেন্দ্র করে
যখন কোনও ফ্লেক্স ধারকটির একাধিক লাইন থাকে (মোড়ানোর কারণে) align-contentক্রস-অক্ষ সারিবদ্ধ করার জন্য সম্পত্তিটি প্রয়োজনীয় হবে।
অনুমান থেকে:
8.4। প্যাকিং ফ্লেক্স লাইন: align-content
সম্পত্তি
align-contentসম্পত্তি আনমন ধারক মধ্যে একটি আনমন ধারক এর লাইন প্রান্তিক যখন ক্রস অক্ষ অতিরিক্ত স্থান, কিভাবে অনুরূপ আছে justify-contentপ্রধান অক্ষ মধ্যে প্রান্তিক পৃথক আইটেম।
দ্রষ্টব্য, এই বৈশিষ্ট্যের কোনও একক-লাইন ফ্লেক্স ধারকটিতে কোনও প্রভাব নেই।
আরও বিশদ এখানে: কীভাবে প্রান্তিককরণ-স্ব, সারিবদ্ধ-আইটেমগুলি এবং সারিবদ্ধকরণের সাথে ফ্লেক্স-মোড়ক কাজ করে?
ব্রাউজার সমর্থন
ফ্লেক্সবক্স IE <10 বাদে সমস্ত বড় ব্রাউজার দ্বারা সমর্থিত । সাফারি 8 এবং আই 10 এর মতো সাম্প্রতিক কিছু ব্রাউজার সংস্করণগুলির জন্য বিক্রেতার উপসর্গের প্রয়োজন । উপসর্গ যুক্ত করার জন্য দ্রুত উপায়ের জন্য অটোপ্রিফিক্সার ব্যবহার করুন । এই উত্তরে আরও বিশদ ।
পুরানো ব্রাউজারগুলির জন্য সমাধানকে কেন্দ্র করে
সিএসএস টেবিল এবং অবস্থান সম্পর্কিত বৈশিষ্ট্য ব্যবহার করে বিকল্প কেন্দ্রিক সমাধানের জন্য এই উত্তরটি দেখুন: https://stackoverflow.com/a/31977476/3597276
