दिलचस्प पोस्ट
बाश खोल लिपि में इनपुट तर्क के अस्तित्व की जाँच करें MySql: MyISAM बनाम Inno DB! एमएस एक्सेस में सभी रिकॉर्ड के माध्यम से कोड को पाश PHP का उपयोग करके आईपी पते पिंग करना और परिणाम गूंजना एंड्रॉइड एनडीके का इस्तेमाल करते हुए एक स्थिर लाइब्रेरी कैसे संकलित करें? अन्य धागे में व्यस्त पाश देरी EDT प्रसंस्करण इंटरैक्शन की तालिका – पालतू जानवरों और घरों के साथ मामला COUNT (*) बनाम COUNT (1) बनाम COUNT (पीके): जो बेहतर है? asp.net वेब रूपों json रिटर्न परिणाम फ़ायरवॉल के पीछे HTTPS पर GitHub तक पहुंचने का प्रयास करते हुए SSL प्रमाणपत्र अस्वीकार कर दिया गया क्या यह गैर-स्थिरता मानक पुस्तकालय कार्यों को constexpr के रूप में व्यवहार करने के लिए एक अनुरूप कम्पाइलर एक्सटेंशन है? Datalist लेबल दिखाएं लेकिन वास्तविक मान सबमिट करें आईओएस एप में प्रयुक्त सभी तरीकों को कैसे लॉग किया जाए अनुरोधित रजिस्ट्री एक्सेस की अनुमति नहीं है एंड्रॉइड में बाहरी फोंट का उपयोग करें

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

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

<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; } 

और परिणाम:

परिणाम!!

सुंदर।

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

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

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

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

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