तत्व को पूर्णस्क्रीन मोड में दिखाते समय, यदि चौड़ाई स्क्रीन (कंटेनर) से छोटी है, तो मुझे तत्व (लाल आयत के साथ हाइलाइट किया गया) को केंद्रित करने की आवश्यकता है। इसे प्राप्त करने के लिए, मैंने tailwindcss flex overflow-x-scroll justify-center (आइटम 1) का उपयोग किया।
यदि चौड़ाई स्क्रीन (कंटेनर) से बड़ी है, तो हम चाहते हैं कि तत्व बाएं किनारे पर संरेखित हो। इसे प्राप्त करने के लिए, मुझे कक्षाओं (आइटम 2) से flex को हटाना होगा।
मेरा सवाल यह है कि मैं इसे दोनों मामलों के लिए कैसे काम कर सकता हूं: संकीर्ण और चौड़ा।
2 जवाब
आपका प्रश्न स्पष्ट नहीं है लेकिन यदि आप तत्व को कंटेनर के आकार में केंद्रित करना चाहते हैं, तो बस इस कोड का पालन करें इससे मदद मिल सकती है:
<div class="lg:w-[85%] md:w-[90%] sm:w-[95%] mx-auto">
<div class=""></div>
</div>
इसका मतलब है कि बड़ी स्क्रीन पर div की चौड़ाई शरीर का 85% है और x-दिशा में मार्जिन ऑटो है या आप उन वर्गों को सीधे लागू कर सकते हैं मध्यम और छोटे स्क्रीन आकारों के लिए लक्षित तत्व वगैरह। यह एक बुनियादी सीएसएस बुनियादी बात है लेकिन tailwindcss . के साथ लागू होती है
शायद आप यही चाहते हैं, मुझे आशा है कि यह मदद करता है
<div class="w-screen border-2 border-red-600 h-16 flex justify-around relative sm:justify-start">
<div class="w-24 h-full bg-blue-700"></div>
<div class="w-24 h-full bg-blue-700"></div>
<div class="w-24 h-full bg-blue-700"></div>
<div class="w-24 h-full bg-blue-700"></div>
</div>
संपादित: मैं पहली बार गलत कर रहा था