ফ্লেক্সবক্সের সাহায্যে কীভাবে একটি সম্পূর্ণ প্রতিক্রিয়াশীল নেভিগেশন বার তৈরি করতে হয়

একটি নেভিগেশন বার, তিনটি ভিন্ন লেআউট।

এই নিবন্ধে, আমি কীভাবে একটি ন্যাভিগেশন বার তৈরি করতে ফ্লেক্সবক্স ব্যবহার করবেন তা ব্যাখ্যা করতে যা যা মিডিয়া প্রশ্নের পাশাপাশি বিভিন্ন স্ক্রিনের আকারগুলিতে সামঞ্জস্য করে।

এই টিউটোরিয়ালটি স্ক্রিম্বায় আমার ফ্রি ফ্লেক্সবক্স কোর্সে একটি ইন্টারেক্টিভ স্ক্রিনকাস্ট হিসাবে পাওয়া যাবে।

কোর্স সম্পর্কে আরও তথ্যের জন্য, এই নিবন্ধটি দেখুন।

সংস্থাপনটি

আসুন খুব সাধারণ নেভিগেশন বারের জন্য মার্কআপ দিয়ে শুরু করুন:

হোম পৃষ্ঠা প্রোফাইল সাইন আউট

দ্য উপাদান আমাদের ফ্লেক্স পাত্রে এবং উপাদানসমূহ আমাদের ফ্লেক্স উপাদান। এটি থেকে একটি ফ্লেক্সবক্স লেআউট তৈরি করতে, নিম্নলিখিত হিসাবে এগিয়ে যান:

.কন্টেইনার {প্রদর্শন: নমনীয়; }

যা নিম্নলিখিত বিন্যাসে বাড়ে:

আমি কিছুটা স্টাইলিং যোগ করেছি, তবে ফ্লেক্সবক্সের সাথে এর কোনও যোগসূত্র নেই।

আপনি দেখতে পাচ্ছেন, ডানদিকে আমাদের আরও কিছুটা জায়গা রয়েছে। এর কারণ এটি হ'ল ফ্লেক্সবক্স বাম থেকে ডানদিকে উপাদানগুলি সাজিয়ে তোলে এবং প্রতিটি উপাদান তার সামগ্রীর হিসাবে এটি বিস্তৃত হয় only

যেহেতু ফ্লেক্স ধারকটি ডিফল্টরূপে একটি ব্লক-স্তরীয় উপাদান (এবং চারটি উপাদানের চেয়ে বৃহত্তর), তাই আমরা শেষে ফাঁক পেয়ে যাব।

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

প্রতিক্রিয়া # 1

আমাদের নেভিগেশন বারকে মৌলিক প্রতিক্রিয়া জানাতে, আমরা কেবল অনুসন্ধান শব্দটিকে 1 এর নমনীয় মানটি দিয়ে যাচ্ছি।

.সন্ধান {ফ্লেক্স: 1; }

এটির ফলাফলটি রয়েছে যে অনুসন্ধানের উপাদানটি প্রসারিত প্রস্থের সাথে প্রসারিত এবং চুক্তিবদ্ধ করা হয়েছে। সুতরাং ডানদিকে কোনও অতিরিক্ত স্থান উপলব্ধ নেই।

অন্যগুলি স্থির থাকা অবস্থায় অনুসন্ধানের আকারটি বাড়িয়ে তোলা বুদ্ধিমান হলেও, এটি যুক্তিযুক্ত হতে পারে যে এটি অন্যের তুলনায় খুব বেশি প্রশস্ত হতে পারে। সুতরাং যদি আপনি এটির পরিবর্তে ধারকটির প্রস্থের সাথে সমস্ত উপাদান বৃদ্ধি করতে চান তবে আপনি কেবল সমস্ত উপাদানকে 1 এর একটি নমনীয় মান নির্ধারণ করতে পারেন।

.container> লি {ফ্লেক্স: 1; }

এটা এভাবে কাজ করে:

আপনি উপাদানগুলিতে বিভিন্ন নমনীয় মানও নির্ধারণ করতে পারেন যা তাদের বিভিন্ন গতিতে বাড়িয়ে তোলে। এই স্ক্রিম্বা খেলার মাঠে চেষ্টা করে দেখুন।

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

প্রতিক্রিয়া # 2

আমাদের নেভিগেশন বার প্রশস্ত স্ক্রিনে ভাল কাজ করে। তবে সংকীর্ণদের নিয়ে সমস্যা দেখা দেয়, যেমন আপনি এখানে দেখতে পারেন:

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

@ মিডিয়া সমস্ত এবং (সর্বাধিক প্রস্থ: 600px) c কন্টেইনার {ফ্লেক্স-মোড়ানো: মোড়ানো; c কনটেনার> লি {নমনীয় ভিত্তি: 50%; }
}

প্রথমত, আসুন ফ্লেক্স মোড়কের সাথে ফ্লেক্সবক্স লেআউটটি মোড়ানো। এটি ডিফল্টরূপে এখন আর্যাপে সেট করা আছে, সুতরাং আমাদের এটিকে মোড়কে পরিবর্তন করতে হবে।

এরপরে আমরা উপাদানগুলির ফ্লেক্স বেস মান 50% এ সেট করি। এটি ফ্লেক্সবক্সের জন্য প্রতিটি উপাদান উপলব্ধ প্রস্থের 50% দখল করতে সক্ষম হয়, ফলস্বরূপ প্রতি লাইনে দুটি উপাদান থাকে:

দ্রষ্টব্য: আমি অনুসন্ধান ইনপুট বাক্সে স্থানধারক পাঠ্যও কেন্দ্রিক করেছি।

এখন আমাদের দুটি আলাদা রাজ্য রয়েছে। তবে এই লেআউটটি এখনও খুব ছোট স্ক্রিনে কাজ করে না, যেমন। বি। পোর্ট্রেট ফর্ম্যাট মোবাইল পর্দা।

আমরা যদি স্ক্রিনটি জুম আউট করা অব্যাহত রাখি তবে এটি নীচের চিত্রের মতো প্রদর্শিত হবে।

এখানে যা ঘটেছিল তা হল দ্বিতীয় সারিটি আর দুটি আইটেম ফিট করে না।

আনসাবস্ক্রাইব এবং অনুসন্ধান আইটেমগুলি কেবল খুব বিস্তৃত কারণ আপনি এগুলিতে বিষয়বস্তু পূরণের জন্য প্রয়োজনীয় সর্বনিম্ন প্রস্থের নীচে সঙ্কুচিত করতে পারবেন না।

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

প্রতিক্রিয়া # 3

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

এটি করার জন্য আমাদের কেবল আমাদের 50% প্রস্থকে 100% এ পরিবর্তন করতে হবে যাতে প্রতিটি সারিতে কেবল একটি আইটেম ফিট হয়। আমরা এই ব্রেকপয়েন্টটি 400px এ যুক্ত করতে যাচ্ছি।

@ মিডিয়া সমস্ত এবং (সর্বাধিক প্রস্থ: 400px) c। কনটেইনার> লি {ফ্লেক্স-বেসিস: 100%; }। অনুসন্ধান {আদেশ: 1; }}

এছাড়াও, আমি অনুসন্ধান শব্দটি নীচে রাখতে চাই। এই কারণে আমি অনুসন্ধান 1 এ সারিবদ্ধ করছি।

এটি নিম্নলিখিত ফলাফল:

প্রাথমিক আদেশ: 1; ফলস উপাদানগুলির ডিফল্টরূপে শূন্যের মান থাকে এবং অন্যান্য উপাদানগুলির পরে যে মান থাকে তার চেয়ে প্রতিটি উপাদানের উচ্চতর মান হওয়ায় অনুসন্ধানের উপাদানটি নীচে স্থাপন করা হয়।

এটি কীভাবে কাজ করে তা দেখতে নিবন্ধের শীর্ষে জিআইএফ এখানে রয়েছে:

অভিনন্দন! আপনি এখন জানেন কীভাবে সম্পূর্ণ প্রতিক্রিয়াশীল নেভিগেশন বার তৈরি করতে ফ্লেক্সবক্স এবং মিডিয়া ক্যোয়ারী ব্যবহার করতে হয়।

আপনি যদি ফ্লেক্সবক্স সম্পর্কে আরও জানতে চান তবে আমরা আপনাকে স্ক্রিম্বায় আমার বিনামূল্যে কোর্সটি গ্রহণ করার পরামর্শ দিই take

আমার ফ্রি ফ্লেক্সবক্স কোর্সে যেতে ছবিতে ক্লিক করুন।

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