এই নিবন্ধটি দেখায় কিভাবে একটি ফ্লেক্সবক্সের ভিতরে পাঠ্যকে উল্লম্বভাবে সারিবদ্ধ করা যায়:
পদ্ধতি 1: 'সারিবদ্ধ-আইটেম' বৈশিষ্ট্য ব্যবহার করা
উল্লম্বভাবে টেক্সট সারিবদ্ধ করতে, ব্যবহারকারীরা ব্যবহার করতে পারেন ' সারিবদ্ধ আইটেম CSS দ্বারা প্রদত্ত সম্পত্তি। এটি উপাদানগুলিকে ফ্লেক্সবক্সের ভিতরে তাদের প্রান্তিককরণ সেট করতে সহায়তা করে। সম্ভাব্য উল্লম্ব প্রান্তিককরণ অবস্থান 'এ হতে পারে শীর্ষ ”, মধ্যম ', বা ' নীচে 'পাশ।
এই দিকগুলিতে উপাদানগুলিকে সারিবদ্ধ করার জন্য ব্যবহারিক প্রদর্শনগুলি নীচে বর্ণিত হয়েছে:
উদাহরণ 1: শীর্ষ অবস্থান
উপরের অবস্থানে ফ্লেক্সবক্সের ভিতরে পাঠ্যটি সারিবদ্ধ করতে, ' flex-শুরু 'মান প্রদান করা হয় ' সারিবদ্ধ আইটেম 'সম্পত্তি। এই সম্পত্তিটি প্রধান ডিভিতে বরাদ্দ করা হয়েছে যা ফ্লেক্স হিসাবে প্রদর্শিত হবে। ধরা যাক, 'এর একটি ক্লাস সহ ডিভ উল্লম্ব ” HTML ফাইলে তৈরি করা হয়। তারপর CSS ফাইলে, সেই ক্লাসটি নির্বাচন করুন এবং নিম্নলিখিত বৈশিষ্ট্যগুলি বরাদ্দ করুন:
উল্লম্ব {
রঙ : সাদা ;
উচ্চতা : 150px ;
প্রদর্শন : ফ্লেক্স ;
প্যাডিং-বাম : 20px ;
সারিবদ্ধ আইটেম : flex-শুরু ;
পেছনের রং : সবুজ অরণ্য ;
}
- প্রথমত, CSS-এর কালার, ব্যাকগ্রাউন্ড-কালার এবং উচ্চতা বৈশিষ্ট্য ব্যবহার করে ডিভ-এ মৌলিক স্টাইলিং এবং অ্যালাইনমেন্ট দেওয়া হয়।
- 'ডিসপ্লে' প্রপার্টিটিকে ফ্লেক্সবক্স বানানোর জন্য 'ফ্লেক্স' এও সেট করা হয়েছে।
- সবশেষে, ফ্লেক্সবক্সের শুরুতে টেক্সট প্রদর্শন করতে, 'সারিবদ্ধ-আইটেম' বৈশিষ্ট্যটিকে 'ফ্লেক্স-স্টার্ট' এ সেট করুন।
উপরের কোডটি কার্যকর করার পরে, ওয়েবপৃষ্ঠাটি এইরকম দেখায়:
আউটপুট দেখায় যে পাঠ্যটি এখন ফ্লেক্সবক্সের ভিতরে শীর্ষ অবস্থানে সারিবদ্ধ।
উদাহরণ 2: মধ্যম অবস্থান
পাঠ্যটিকে মধ্যম অবস্থানে উল্লম্বভাবে সারিবদ্ধ করতে, ' কেন্দ্র ' CSS এর মান ' সারিবদ্ধ আইটেম 'সম্পত্তি:
উল্লম্ব {রঙ : সাদা ;
উচ্চতা : 150px ;
প্রদর্শন : ফ্লেক্স ;
প্যাডিং-বাম : 20px ;
সারিবদ্ধ আইটেম : কেন্দ্র ;
পেছনের রং : সবুজ অরণ্য ;
}
উপরের কোডটি কার্যকর করার পরে:
উপরের আউটপুটটি দেখায় যে পাঠ্যটি এখন ফ্লেক্সবক্সের কেন্দ্রে সারিবদ্ধ।
উদাহরণ 3: নীচের অবস্থান
ফ্লেক্সবক্সের নীচে পাঠ্য সেট করতে, ' ফ্লেক্স-এন্ড 'মূল্য' সারিবদ্ধ আইটেম 'সম্পত্তি। এই সময় পাঠ্যটি সেই অবস্থানে সারিবদ্ধ হয় যেখানে ফ্লেক্সবক্সটি শেষ হয় মানে নীচের দিকে:
উল্লম্ব {রঙ : সাদা ;
উচ্চতা : 150px ;
প্রদর্শন : ফ্লেক্স ;
প্যাডিং-বাম : 20px ;
সারিবদ্ধ আইটেম : ফ্লেক্স-এন্ড ;
পেছনের রং : সবুজ অরণ্য ;
}
উপরের কোডটি কার্যকর করার পরে, ওয়েবপৃষ্ঠাটি এইরকম দেখায়:
উপরের আউটপুটটি দেখায় যে পাঠ্যটি এখন নীচের অবস্থানে উল্লম্বভাবে সারিবদ্ধ।
পদ্ধতি 2: 'জাস্টিফাই-কন্টেন্ট' প্রপার্টি ব্যবহার করা
দ্য ' ন্যায্যতা-সামগ্রী ফ্লেক্সবক্সের ভিতরে টেক্সটটিকে উল্লম্বভাবে সারিবদ্ধ করতেও সম্পত্তি ব্যবহার করা যেতে পারে। যাইহোক, এটি 'এর মতই কাজ করে' পাঠ্য-সারিবদ্ধ ” সম্পত্তি এবং এটি সারির দিক থেকে উপাদানগুলিকে সারিবদ্ধ করে। সুতরাং, প্রান্তিককরণের দিক পরিবর্তন করতে, ' ফ্লেক্স-দিক 'সম্পত্তি ব্যবহার করা হয় সেট করতে' ন্যায্যতা-সামগ্রী 'এর দিকে প্রান্তিককরণ' কলাম ' অভিমুখ:
উল্লম্ব {উচ্চতা : 150px ;
প্রদর্শন : ফ্লেক্স ;
প্যাডিং-বাম : 20px ;
রঙ : সাদা ;
পেছনের রং : অন্ধকার ;
ফ্লেক্স-দিক : কলাম ;
ন্যায্যতা-সামগ্রী : ফ্লেক্স-এন্ড ;
}
উপরের কোডের ব্যাখ্যা নিচে দেওয়া হল:
- দ্য ' উচ্চতা ', ' রঙ ' এবং ' প্যাডিং-বাম বৈশিষ্ট্যগুলি ঠিক উপরের পদ্ধতির মতো কাজ করে।
- এর পরে, সেট করুন ' কলাম 'মূল্য' ফ্লেক্স-দিক ” কলামের মাধ্যমে শৈলী প্রয়োগ করতে ফ্লেক্সবক্সের।
- এর পরে, ' ন্যায্যতা-সামগ্রী ” সম্পত্তি উল্লম্বভাবে পাঠ্যকে সারিবদ্ধ করে।
- শেষ পর্যন্ত, ' ফ্লেক্স-এন্ড 'মান উপাদানটিকে সারিবদ্ধ করে ' নীচে 'পাশ।
বিঃদ্রঃ : ব্যবহারকারীরাও সেট করতে পারেন ' flex-শুরু ' এবং ' কেন্দ্র ' মান ' শীর্ষ ', এবং ' মধ্যম ” পক্ষ, যথাক্রমে।
উদাহরণস্বরূপ, উপরের কোডটি কার্যকর করার পরে ওয়েবপৃষ্ঠাটি এইরকম দেখায়:
উপরের আউটপুটটি দেখায় যে পাঠ্যটি ফ্লেক্সবক্সের নীচে সারিবদ্ধ করা হয়েছে।
উপসংহার
একটি ফ্লেক্সবক্সের ভিতরে পাঠ্যটিকে উল্লম্বভাবে সারিবদ্ধ করতে, ' সারিবদ্ধ আইটেম ' এবং ' ন্যায্যতা-সামগ্রী ' CSS বৈশিষ্ট্য ব্যবহার করা যেতে পারে. এই উভয় বৈশিষ্ট্য পায় ' flex-শুরু ', ' কেন্দ্র 'বা' ফ্লেক্স-এন্ড ' টেক্সট সারিবদ্ধ করতে মান ' শীর্ষ ', ' মধ্যম ' এবং ' নীচে ” যথাক্রমে ফ্লেক্সবক্সের ভিতরের দিকনির্দেশ। এই নিবন্ধটি একটি ফ্লেক্সবক্সে পাঠ্যের উল্লম্ব প্রান্তিককরণ প্রদর্শন করেছে।