নমনীয় বাক্স বিন্যাস
সিএসএস ফ্লেক্সিবল বক্সের আবির্ভাবের সাথে সাথে অনেক ওয়েব ডিজাইনারের দুঃস্বপ্ন 1 সমাধান করা হয়েছে। সবচেয়ে হ্যাকি একটি, উল্লম্ব সারিবদ্ধ। এখন এটি অজানা উচ্চতায়ও সম্ভব ।
"দুই দশকের লেআউট হ্যাকের সমাপ্তি ঘটছে tomorrow সম্ভবত আগামীকাল নয়, শীঘ্রই, এবং আমাদের সারা জীবনের জন্য।"
- ডাব্লু 3 কনফ 2013 এ সিএসএস লিজেন্ডারি এরিক মেয়ার
নমনীয় বক্স (বা সংক্ষেপে, ফ্লেক্সবক্স), একটি নতুন লেআউট সিস্টেম যা বিশেষভাবে বিন্যাসের উদ্দেশ্যে ডিজাইন করা হয়েছে। স্পেসিফিকেশন রাজ্যের :
ফ্লেক্স লেআউটটি স্তরীয়ভাবে ব্লক বিন্যাসের মতো। এটিতে আরও অনেক জটিল পাঠ্য বা ডকুমেন্ট-কেন্দ্রিক বৈশিষ্ট্য নেই যা ব্লক বিন্যাসে যেমন ফ্লোট এবং কলামগুলিতে ব্যবহার করা যেতে পারে। বিনিময়ে এটি ওয়েব বিতরণ এবং জটিল ওয়েব পৃষ্ঠাগুলির প্রায়শই প্রয়োজন হয় এমন উপায়ে স্থান বিতরণ এবং সামগ্রী প্রান্তিককরণের জন্য সহজ এবং শক্তিশালী সরঞ্জামগুলি অর্জন করে।
এই ক্ষেত্রে এটি কীভাবে সহায়তা করতে পারে? দেখা যাক.
উল্লম্ব সারিবদ্ধ কলাম
টুইটার বুটস্ট্র্যাপ ব্যবহার করে আমাদের .rowকিছুটা .col-*এস আছে। আমাদের যা করতে হবে তা হ'ল কাঙ্ক্ষিত .row2টিকে একটি ফ্লেক্স ধারক বাক্স হিসাবে প্রদর্শন করা এবং তারপরে তার সমস্ত ফ্লেক্স আইটেমের (কলামগুলি) align-itemsসম্পত্তি দ্বারা উল্লম্বভাবে সারিবদ্ধ করা ।
এখানে উদাহরণস্বরূপ (যত্ন করে মন্তব্য পড়ুন)
<div class="container">
<div class="row vertical-align"> <!--
^-- Additional class -->
<div class="col-xs-6"> ... </div>
<div class="col-xs-6"> ... </div>
</div>
</div>
.vertical-align {
display: flex;
align-items: center;
}
আউটপুট
রঙিন অঞ্চল কলামগুলির প্যাডিং-বক্স প্রদর্শন করে।
স্পষ্ট করে বলছি align-items: center
8.3 ক্রস-অক্ষ সারিবদ্ধ: align-itemsসম্পত্তি
ফ্লেক্স আইটেমগুলি লম্বাকৃতির দিকের মতো ফ্লেক্স ধারকটির বর্তমান লাইনের ক্রস অক্ষের সাথে সংযুক্ত করা যেতে পারে justify-content। align-itemsবেনামে ফ্লেক্স আইটেম সহ ফ্লেক্স ধারকের সমস্ত আইটেমের জন্য ডিফল্ট প্রান্তিককরণ সেট করে ।
align-items: center;
কেন্দ্রের মান অনুসারে, ফ্লেক্স আইটেমের মার্জিন বাক্সটি লাইনের মধ্যে ক্রস অক্ষে কেন্দ্রীভূত হয় ।
বড় সতর্কতা
গুরুত্বপূর্ণ নোট # 1:width আপনি .col-xs-#কলামগুলিতে ক্লাসগুলির মধ্যে একটি না দিলে টুইটার বুটস্ট্র্যাপ অতিরিক্ত ছোট ছোট ডিভাইসে কলামগুলির সুনির্দিষ্ট করে না ।
সুতরাং এই নির্দিষ্ট ডেমোতে, আমি .col-xs-*কলামগুলি মোবাইল মোডে সঠিকভাবে প্রদর্শিত হওয়ার জন্য ক্লাস ব্যবহার করেছি , কারণ এটি widthকলামটির স্পষ্টভাবে উল্লেখ করে ।
কিন্তু অন্যথায় আপনি পারে সুইচ বন্ধ flexbox পরিবর্তন করে কেবল বিন্যাস display: flex;করার display: block;নির্দিষ্ট পর্দা মাপ। এই ক্ষেত্রে:
/* Extra small devices (767px and down) */
@media (max-width: 767px) {
.row.vertical-align {
display: block; /* Turn off the flexible box layout */
}
}
অথবা আপনি পারে উল্লেখ .vertical-align শুধুমাত্র নির্দিষ্ট পর্দা মাপ যেমন:
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.row.vertical-align {
display: flex;
align-items: center;
}
}
সেক্ষেত্রে, আমি যেতে চাই @KevinNelson এর পদ্ধতির ।
গুরুত্বপূর্ণ নোট # 2: ব্রেভিটির কারণে বিক্রেতার উপসর্গগুলি বাদ দেওয়া হয়েছে। ফ্লেক্সবক্স সিনট্যাক্স সময় পরিবর্তন করা হয়েছে। নতুন লিখিত বাক্য গঠনটি ওয়েব ব্রাউজারগুলির পুরানো সংস্করণগুলিতে কাজ করবে না (তবে ইন্টারনেট এক্সপ্লোরার 9 এর মতো পুরানো নয়! ফ্লেক্সবক্স ইন্টারনেট এক্সপ্লোরার 10 এবং তারপরে সমর্থিত)।
এর অর্থ আপনারও display: -webkit-boxপ্রোডাকশন মোডে বিক্রেতার-উপসর্গযুক্ত বৈশিষ্ট্যগুলি ইত্যাদি ব্যবহার করা উচিত ।
আপনার উপর ক্লিক করেন "টগল সংকলিত দেখুন" এ ডেমো , আপনি পূর্বে সমাধান সিএসএস ঘোষণা এর (ধন্যবাদ সংস্করণ দেখতে পাবেন Autoprefixer )।
উল্লম্ব সারিবদ্ধ সামগ্রী সহ পূর্ণ উচ্চতার কলামগুলি
পূর্ববর্তী ডেমোতে আপনি দেখতে পাচ্ছেন , কলামগুলি (ফ্লেক্স আইটেমগুলি) তাদের ধারক (ফ্লেক্স ধারক বাক্স। অর্থ .rowউপাদান) এর চেয়ে বেশি বেশি থাকবে না।
এটি সম্পত্তির centerজন্য মান ব্যবহার করার কারণে align-items। ডিফল্ট মানটি stretchযাতে আইটেমগুলি প্যারেন্ট উপাদানটির পুরো উচ্চতা পূরণ করতে পারে।
এটি ঠিক করার জন্য, আপনি display: flex;কলামগুলিতেও যুক্ত করতে পারেন :
এখানে উদাহরণস্বরূপ (আবার মন্তব্যগুলি মনে রাখবেন)
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center; /* Align the flex-items vertically */
justify-content: center; /* Optional, to align inner flex-items
horizontally within the column */
}
আউটপুট
রঙিন অঞ্চল কলামগুলির প্যাডিং-বক্স প্রদর্শন করে।
সর্বশেষে, তবে কমপক্ষে , লক্ষ্য করুন যে এখানে ডেমোস এবং কোড স্নিপেটগুলি আপনাকে আলাদা ধারণা দেওয়ার জন্য, লক্ষ্য অর্জনের জন্য একটি আধুনিক পদ্ধতির সরবরাহ করতে বোঝায়। আপনি যদি বাস্তব বিশ্বের ওয়েবসাইট বা অ্যাপ্লিকেশনগুলিতে এই পদ্ধতির ব্যবহার করতে চলেছেন তবে দয়া করে " বড় সতর্কতা " বিভাগটি মনে করুন ।
ব্রাউজার সমর্থন সহ আরও পড়ার জন্য, এই সংস্থানগুলি কার্যকর হবে:
১. প্রতিক্রিয়াশীল উচ্চতার সাথে একটি ডিভের অভ্যন্তরে উল্লম্বভাবে একটি চিত্র সারিবদ্ধ করুন
২ টুইটার বুটস্ট্র্যাপের ডিফল্টটিকে পরিবর্তন না করার জন্য অতিরিক্ত শ্রেণি ব্যবহার করা ভাল .row।
div, ভিতরে কোনও পাঠ্য নেই, এই জাতীয় কিছু jsfiddle.net/corinem/Aj9H9 তবে এই উদাহরণে আমি বুটস্ট্র্যাপ ব্যবহার করি না