दिलचस्प पोस्ट
com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: संचार लिंक विफलता कैसे जावास्क्रिप्ट में लाइन को तोड़ने के लिए? जावा के साथ XSLT प्रसंस्करण? क्या Python के Virtualenv के दूसरे संस्करण को स्थापित करना संभव है? PHP में एक फ्लैट सरणी से पेड़ का निर्माण करें INSTALL_PARSE_FAILED_INCONSISTENT_CERTIFICATES को बिना स्थापना के निपटान कैसे करें एमैक्स लिस्प में बंद कैसे कर सकता हूं? FindViewById रिक्त रिटर्न आप हजारों अलगाव के रूप में कॉमा को सम्मिलित करने के लिए कैसे cout लोकेल सेट करते हैं? लंबवत रूप से संचालित करने के लिए एंड्रॉइड तलाशबार विजेट को संशोधित करना एमवीसी बंडलिंग और सीएसएस रिश्तेदार यूआरएल उद्देश्य-सी में आयवर और गुणों के बीच अंतर क्या है आर – एक पिक्सेल मैट्रिक्स की छवि? रूट फ़ोन के सिस्टम समय की स्थापना सी # और एक्सएएमएल में एक WPF डेटाग्रिड के लिए एक डाटासेट में एक टेबल बाँध कैसे करें

आखिरी पंक्ति में फ्लेक्स आइटम को उचित रूप से आकार देने और उसे संरेखित करना

मान लें कि मेरे पास उपयोगकर्ताओं की सूची है, और प्रत्येक उपयोगकर्ता के पास कुछ नंबर संलग्न है। प्रत्येक उपयोगकर्ता इस प्रकार सूचीबद्ध है:

<span><a href="/user/Niet">Niet</a> &rArr; 2</span> 

वे सभी के साथ स्टाइल हैं:

 .userlist>span { display: inline-block; padding: 2px 6px; border: 1px solid currentColor; } 

यहां कार्रवाई में इसका एक उदाहरण है:

स्क्रीनशॉट उदाहरण

ठीक है, यह ठीक है, उपयोगकर्ताओं की सूची काफी लंबी हो सकती है, इसलिए यहां कॉम्पैक्ट-नास महत्वपूर्ण है। मेरा मुद्दा यह है कि सही किनारे बेहद असंगत है, इसलिए मैं सोच रहा हूं कि इसमें सुधार करने का कोई तरीका है।

मेरा पहला सोचा था, ज़ाहिर है, सिर्फ स्पेन्स पर एक निश्चित चौड़ाई निर्धारित करना हालांकि यूज़रनेम चौड़ाई वास्तव में पूर्वानुमान नहीं है। आप किसी व्यक्ति को iiiii कहा जाता है और जिसे किसी व्यक्ति को WWWWW कहा जाता है लेकिन चूंकि यह एक मोनोस्पेस फ़ॉन्ट नहीं है, आप "iiiii" और "WWWWW" प्राप्त करते हैं, वहां बहुत स्पष्ट रूप से अलग-अलग चौड़ाई। इसलिए "अधिकतम चौड़ाई" मूल रूप से सबसे अधिक अनुमति वाला पात्र होगा, जो W , अधिकतम उपयोगकर्ता नाम की लंबाई से गुणा। चलो कोशिश करो …

निश्चित चौड़ाई

Ew। मैं भी एक <ul> उपयोग कर सकता / सकती हूं यदि वह परिणाम है जो मैं प्राप्त करना चाहता हूं अगले सोचा शायद display:table कुछ शामिल था display:table तालिकाएं चौड़ाई के लिए स्तंभों के अनुरूप हों, जबकि अभी भी गतिशील रहती है और ज्यादातर लोगों को समझदार उपयोगकर्ता नाम (* खांसी * है … ओह हे, ताकि आप मार्कडाउन से बचते हैं … हह …) – लेकिन यह बहुत खाली जगह के साथ समाप्त होता है।

तो मेरा वर्तमान विचार किसी तरह का औचित्य-संरेखण है। यह पाठ के लिए काफी अच्छी तरह से काम करता है, है ना? लेकिन अफसोस, text-align: justify इस मामले में text-align: justify ढंग से सबूत ठीक करता है, संभवतः क्योंकि तत्वों के बीच कोई रिक्त स्थान उचित नहीं है।

मेरा अंतिम प्रयास फ्लेक्सबॉक्स का इस्तेमाल कर रहा था, जो कुछ मैं पहले से साइट के नए डिज़ाइन में अच्छा प्रभाव डाल रहा हूं। चलो देखते हैं कि यह display: flex; flex-wrap: wrap; साथ कैसे दिखता है display: flex; flex-wrap: wrap; display: flex; flex-wrap: wrap; कंटेनर पर, और flex: 1 0 auto; तत्वों पर …

flexbox

हं, यह बहुत बुरा नहीं लग रहा है अल-

असफल

… एचएम बहुत करीब। मुझे वास्तव में क्या पसंद है, तत्वों की आखिरी पंक्ति के लिए फ्लेक्स को सभी तरह से फैलाने के लिए नहीं। यह ठीक है जब आखिरी पंक्ति में तीन या चार होते हैं, लेकिन दो थोड़ा मूर्खतापूर्ण दिखता है और सिर्फ एक ही पूरी चौड़ाई को भरता है और हास्यास्पद दिखता है।

तो मुझे लगता है कि यह थोड़ा सा साहस एक सरल सवाल के नीचे फोड़े:

मैं कैसे औचित्य-संरेखण व्यवहार को प्राप्त कर सकता हूं, जिसमें तत्वों को अंतिम पंक्ति को छोड़कर कंटेनर की पूरी चौड़ाई का उपयोग करने के लिए स्थान दिया जाता है, जहां उन्हें उनकी प्राकृतिक चौड़ाई का उपयोग करना चाहिए?


इस छोटी सी कहानी को पूरा करने के लिए @ Michael_B के उत्तर के लिए धन्यवाद, यहां बताया गया है कि मैंने कैसे समाधान लागू किया है:

 .userlist:after { content: ''; flex: 10 0 auto; } 

और परिणाम:

परिणाम!!

सुंदर।

Solutions Collecting From Web of "आखिरी पंक्ति में फ्लेक्स आइटम को उचित रूप से आकार देने और उसे संरेखित करना"

फ्लेक्सबॉक्स का उपयोग करना, 3 या 4 "प्रेत" आइटम बनाएं जो हमेशा अंतिम स्लॉट पर कब्जा कर लेते हैं

इसलिए, उदाहरण के लिए, उपयोगकर्ता # 82 वर्तमान में आपकी अंतिम प्रविष्टि है।

नकली उपयोगकर्ता 83, 84, 85 visibility: hidden साथ बनाएं visibility: hidden

वैकल्पिक रूप से, visibility: hidden साथ अंत में सिर्फ एक प्रेत वस्तु का प्रयास करें visibility: hidden और flex-grow: 10 इसे इसके साथ लक्षित करें :last-child या :last-of-type छद्म-वर्ग।