मैं कोशिश करने के लिए समान रूप से/अंतरिक्ष के बीच की जगह का उपयोग कर रहा था और तत्वों के बीच समान अंतर रखता था और यह ठीक काम करता है। मैं जो करने की कोशिश कर रहा हूं वह उन्हें समान रूप से विभाजित करने के बाद उनके बीच की जगह को कम कर रहा है। मुझे कोई कामकाजी समाधान नहीं मिला। मैंने लाइन-ऊंचाई और मार्जिन में हेरफेर करने की कोशिश की है लेकिन यह काम नहीं किया। क्या तत्वों को समान रूप से रखने के बाद आकार को कम करना संभव है? यदि नहीं है तो समान रूप से अंतरिक्ष तत्वों का उचित तरीका क्या है और उनके अंतर को भी नियंत्रित करें। किसी भी मदद की सराहना की जाती है। अग्रिम में धन्यवाद।

नोट: मैं चाहता हूं कि आइटम या तो दाएं तैरें या बाईं ओर केंद्रित न हों!

इसके अलावा, यह एकमात्र SO लिंक है जो मुझे इसके बारे में मिल सकता है: फ्लेक्सबॉक्स में आइटम्स के बीच स्पेस को कैसे कम करें जस्टिफाई-कंटेंट: स्पेस-बीच

जिसने डाउनवोट किया, क्यों ??

.leftHeaderItems {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  position: absolute;
  right: 0%;
  width: 100%;
  height: 7%;
  margin: 0px;
  background: green;
}
<div class="leftHeaderItems">
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
  <p>Item 4</p>
  <p>Item 5</p>
</div>

अपडेट करें: साथ ही, @mianbato द्वारा सुझाए गए अंतराल संपत्ति की कोशिश की, मैं यह नहीं समझ सकता कि एक पंक्ति में आइटम कैसे सेट करें, कॉलम नहीं।

.leftHeaderItems {
  display: grid;
  justify-content: space-evenly;
  align-items: center;
  position: absolute;
  left: 0%;
  width: 30%;
  height: 100%;
  grid-row-gap: 3px;
  background: inherit;
}
<div class="leftHeaderItems">
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
  <p>Item 4</p>
  <p>Item 5</p>
</div>
0
seriously 27 नवम्बर 2021, 11:46
space-evenly का अर्थ है कि ब्राउज़र इसे नियंत्रित करता है। आप वास्तव में क्या हासिल करने की कोशिश कर रहे हैं?
 – 
connexo
27 नवम्बर 2021, 11:52
क्या आपने gap संपत्ति के साथ प्रयास किया है?
 – 
mianbato
27 नवम्बर 2021, 11:53
अंतरिक्ष तत्वों को समान रूप से और उनके अंतर को नियंत्रित करने की आवश्यकता है
 – 
seriously
27 नवम्बर 2021, 11:56
यह एक विरोधाभास है।
 – 
connexo
27 नवम्बर 2021, 12:03
बस कोशिश की कि काम नहीं किया ऊपर के अपडेट पर एक नज़र डालें
 – 
seriously
27 नवम्बर 2021, 12:03

4 जवाब

आप display: grid के साथ प्रयास कर सकते हैं और फिर grid-gap के साथ रिक्ति को समायोजित कर सकते हैं जिसे मैंने 12px पर सेट किया है

.leftHeaderItems {
  align-items: center;
  position: absolute;
  right: 0%;
  width: 100%;
  height: auto;
  margin: 0px;
  background: green;
  justify-content: center;
  grid-column: 1 / -1;
  display: grid;
  grid-gap: 12px;
  grid-template-columns: repeat(5, auto);
  flex-direction: column;
  margin: 0;
}
<div class="leftHeaderItems">
    <p>Item 1</p>
    <p>Item 2</p>
    <p>Item 3</p>
    <p>Item 4</p>
    <p>Item 5</p>
</div>
1
Authentic Science 27 नवम्बर 2021, 12:03

डिस्प्ले फ्लेक्स और गैप प्रॉपर्टी का उपयोग करना

.leftHeaderItems{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap:1rem;
  height: 7%;
  padding-left: 1rem;
  background: green;
  }
<div class="leftHeaderItems">
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
  <p>Item 4</p>
  <p>Item 5</p>
</div>
1
mianbato 27 नवम्बर 2021, 12:11
मुझे यही चाहिए था धन्यवाद
 – 
seriously
27 नवम्बर 2021, 12:14
यदि आप यही चाहते थे, तो आपको यह समझाने में एक भयानक काम किया कि आपको क्या चाहिए।
 – 
connexo
27 नवम्बर 2021, 12:14
वास्तव में @connexo को कैसे सुधारें
 – 
seriously
27 नवम्बर 2021, 12:14
"[...] यह ठीक काम करता है। मैं जो करने की कोशिश कर रहा हूं वह उन्हें समान रूप से विभाजित करने के बाद उनके बीच की जगह को कम कर रहा है [...]" फिर अपना स्निपेट चलाएं। मेरा उत्तर 5 में से केवल वही है जो आप पूछ रहे हैं। बिना किसी शब्द के आपने कहा कि आप उन्हें केंद्रित नहीं करना चाहते। आपने कहा था यह ठीक काम करता है और मैं उनके बीच के स्थान को कम करने का प्रयास कर रहा हूं
 – 
connexo
27 नवम्बर 2021, 12:15
मैंने विशेष रूप से अंतरिक्ष से संबंधित कुछ समान रूप से कहा और अंतरिक्ष समान रूप से कभी भी वस्तुओं को div में केंद्रित नहीं करता है। आप मेरे प्रश्न में एक संपादन जोड़ सकते हैं जहाँ मैं गलत हुआ @connexo
 – 
seriously
27 नवम्बर 2021, 12:18

आप 'जस्टिफाई-कंटेंट: सेंटर' का इस्तेमाल कर सकते हैं और फिर अपनी जरूरत के हिसाब से एडजस्ट करने के लिए 'फ्लेक्स-बेस: [कुछ-वैल्यू]' का इस्तेमाल कर सकते हैं;

.leftHeaderItems {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-basis: 0;
  position: absolute;
  right: 0%;
  width: 100%;
  height: 7%;
  margin: 0px;
  background: green;
}

.leftHeaderItems > p {
  flex-basis: 90px;
}
0
VahidM 27 नवम्बर 2021, 12:14
'फ्लेक्स-आधार' के लिए उपयोग करने के लिए 'अधिकतम-सामग्री', 'न्यूनतम-सामग्री', 'फिट-सामग्री' जैसे मूल्य हैं;
 – 
VahidM
27 नवम्बर 2021, 12:17

यदि आप पैरेंट एलीमेंट के बीच स्पेस/स्पेस का समान रूप से उपयोग करने के बाद क्लाइड एलिमेंट्स के मार्जिन वैल्यू को एडिट करना चाहते हैं, तो मार्जिन चाइल्ड एलिमेंट्स को दिया जाना चाहिए, पैरेंट एलिमेंट को नहीं।

.leftHeaderItems {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  right: 0%;
  width: 100%;
  height: 7%;
  background: green;
}
.leftHeaderItems > p {
  margin : auto 10px; 
}
0
Haraho 27 नवम्बर 2021, 12:15