कैसे एक फ्लेक्स कंटेनर को केंद्र में रखा जाए लेकिन फ्लेक्स को बाईं ओर संरेखित करें

Question

मैं चाहता हूं कि फ्लेक्स आइटम केंद्रित हों, लेकिन जब हमारे पास दूसरी रेखा हो, तो 1 के नीचे 5 (नीचे की छवि से) और अभिभावक में केंद्रित न हो।

यहाँ एक उदाहरण है जो मेरे पास है:

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
}
li {
  list-style-type: none;
  border: 1px solid gray;
  margin: 15px;
  padding: 5px;
  width: 200px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

http://jsfiddle.net/8jqbjese/2/

Answer 1

Flexbox चुनौती और सीमा

चुनौती फ्लेक्स आइटम के एक समूह को केंद्र में रखने और लपेटने पर उन्हें संरेखित करने की है। लेकिन जब तक प्रति पंक्ति बक्से की निश्चित संख्या नहीं होती है, और प्रत्येक बॉक्स निश्चित-चौड़ाई वाला होता है, यह वर्तमान में फ्लेक्सबॉक्स के साथ संभव नहीं है।

प्रश्न में पोस्ट किए गए कोड का उपयोग करके, हम एक नया फ्लेक्स कंटेनर बना सकते हैं जो वर्तमान फ्लेक्स कंटेनर ( ul) को लपेटता है , जो हमें इसके ulसाथ केन्द्रित करने की अनुमति देगा justify-content: center।

तब के फ्लेक्स आइटम को ulबाएं-संरेखित किया जा सकता था justify-content: flex-start।

#container {
    display: flex;
    justify-content: center;
}

ul {
    display: flex;
    justify-content: flex-start;
}

यह वाम-संरेखित फ्लेक्स आइटम का एक केंद्रित समूह बनाता है।

इस पद्धति के साथ समस्या यह है कि कुछ स्क्रीन आकारों में दाईं ओर एक अंतराल होगा ul, जिससे यह अब केंद्रित नहीं दिखाई देगा।

यह फ्लेक्स लेआउट के कारण होता है (और, वास्तव में, सामान्य रूप से CSS) कंटेनर:

1. पता नहीं है कि एक तत्व कब लपेटता है;
2. पता नहीं है कि पहले से कब्जा कर लिया गया स्थान अब खाली है, और
3. संकीर्ण लेआउट को छोटा करने के लिए अपनी चौड़ाई को पुनर्गणना नहीं करता है।

दाईं ओर व्हाट्सएप की अधिकतम लंबाई फ्लेक्स आइटम की लंबाई है जो कंटेनर के वहां होने की उम्मीद कर रहा था।

निम्नलिखित डेमो में, खिड़की को क्षैतिज रूप से फिर से आकार देकर, आप व्हाट्सएप को आते और जाते देख सकते हैं।

डेमो

---

एक अधिक व्यावहारिक दृष्टिकोण

वांछित लेआउट को फ्लेक्सबॉक्स का उपयोग किए बिना inline-blockऔर मीडिया प्रश्नों के बिना प्राप्त किया जा सकता है ।

एचटीएमएल

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

सीएसएस

ul {
    margin: 0 auto;                  /* center container */
    width: 1200px;
    padding-left: 0;                 /* remove list padding */
    font-size: 0;                    /* remove inline-block white space;
                                        see https://stackoverflow.com/a/32801275/3597276 */
}

li {
    display: inline-block;
    font-size: 18px;                 /* restore font size removed in container */
    list-style-type: none;
    width: 150px;
    height: 50px;
    line-height: 50px;
    margin: 15px 25px;
    box-sizing: border-box;
    text-align: center;
}

@media screen and (max-width: 430px) { ul { width: 200px; } }
@media screen and (min-width: 431px) and (max-width: 630px) { ul { width: 400px; } }
@media screen and (min-width: 631px) and (max-width: 830px) { ul { width:600px;  } }
@media screen and (min-width: 831px) and (max-width: 1030px) { ul { width: 800px; } }
@media screen and (min-width: 1031px) and (max-width: 1230px) { ul { width: 1000px; } }

उपरोक्त कोड इस तरह से बाएं-संरेखित बाल तत्वों के साथ एक क्षैतिज-केंद्रित कंटेनर प्रदान करता है:

डेमो

---

अन्य विकल्प

• अंतिम पंक्ति पर फ्लेक्स आइटम (ओं) को उचित आकार देना और संरेखित करना

• डेसेंड्रो मेसनरी

  चिनाई एक जावास्क्रिप्ट ग्रिड लेआउट लाइब्रेरी है। यह उपलब्ध ऊर्ध्वाधर स्थान के आधार पर तत्वों को एक दीवार में मेसन फिटिंग पत्थरों की तरह इष्टतम स्थिति में रखकर काम करता है। आपने संभवतः इसे पूरे इंटरनेट पर उपयोग में देखा है।

  ^{स्रोत: http://masonry.desandro.com/}

• सीएसएस ग्रिड लेआउट मॉड्यूल स्तर 1

  यह सीएसएस मॉड्यूल उपयोगकर्ता इंटरफ़ेस डिज़ाइन के लिए अनुकूलित दो-आयामी ग्रिड-आधारित लेआउट प्रणाली को परिभाषित करता है। ग्रिड लेआउट मॉडल में, ग्रिड कंटेनर के बच्चों को पूर्वनिर्धारित लचीले या निश्चित आकार के लेआउट ग्रिड में मनमाने ढंग से स्लॉट में तैनात किया जा सकता है।

  ^{स्रोत: https://drafts.csswg.org/css-grid/}

Comments

हां, लोग जो करना चाहते हैं, उसके लिए फ्लेक्सबॉक्स का उपयोग करना और वास्तव में एक ग्रिड बनाना बहुत कुछ है। सौभाग्य से यह सीएसएस ग्रिड द्वारा कवर किया जाएगा जब कि पहुंच अधिक अंतिम रूप दे दी जाती है।

— टायलरएच

लिंक्ड इस पोस्ट तुम्हारा करने के लिए। मेरे पास एक और संस्करण है कि उसी मुद्दे को कैसे हल किया जाए, फिर भी, यह एक डूप हो सकता है, इसलिए एक नज़र डालें और अपने लिए तय करें कि क्या आप इसे बंद करना चाहते हैं। और इस में महान विवरण के लिए प्लस 1।

— आसन

शायद एक और विचार margin:0 autoएक मूल आवरण पर करना है , ताकि सब कुछ पृष्ठ पर केंद्रित हो। उस बिंदु से, सभी बाल घटक, (यानी पहला फ्लेक्स-कंटेनर) सामान्य प्रवाह पंक्ति प्रक्रिया के बारे में बताता है? ऐसा लगता है कि यह करने के लिए सरल बनाया जा सकता है।

— 18

Answer 2

आप इसे सीएसएस ग्रिड के साथ प्राप्त कर सकते हैं, बस उपयोग करें repeat(autofit, minmax(width-of-the-element, max-content))

ul {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(210px, max-content));
       grid-gap: 16px;
       justify-content: center;
       padding: initial;
}

li {
    list-style-type: none;
    border: 1px solid gray;
    padding: 5px;
    width: 210px;
}

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

http://jsfiddle.net/rwa20jkh/

Comments

दिलचस्प। लेकिन दाईं ओर खाई को खत्म नहीं करता है या ग्रिड को केंद्र नहीं करता है

— लाल

@Red एक बात गलत थी। मैं बदल justify-items: centerगया justify-content:center, और अब यह पूरी तरह से केंद्र में है।

— --२

मैं 210pxअंदर के हिस्से को नहीं समझता minmax। मैं कैसे एक ही है लेकिन एक कृत्रिम प्रतिबंध के बिना 210px? Flexbox के साथ ऐसा कोई प्रतिबंध नहीं है। मैं फ्लेक्सबॉक्स के साथ बिल्कुल वैसा ही परिणाम चाहता हूं, लेकिन सामग्री क्षेत्र को आपके समाधान की तरह केंद्रित होना चाहिए।

— एंड्री मिखायलोव - lolmaus

हाय @ AndreyMikhaylov-lolmaus, यह विधि तब काम करती है जब आप सभी तत्वों के लिए एक निश्चित चौड़ाई निर्धारित करना चाहते हैं। प्रश्न में, इसे व्यक्त किया जाता है width:200px, और मेरे उदाहरण में, जैसा कि मैंने सेट किया है width:210px, मुझे उस minmaxभाग में भी जोड़ना होगा

— the२

@ जो 82 स्पष्टीकरण के लिए धन्यवाद! Arbit क्या आप इसे मनमाने ढंग से चौड़ाई के तत्वों के लिए काम करने का एक तरीका जानते हैं?

— एंड्री मिखायलोव - lolmaus

Answer 3

जैसा कि @michael ने सुझाव दिया है, यह वर्तमान फ्लेक्सबॉक्स के साथ एक सीमा है। लेकिन अगर आप अभी भी उपयोग करना चाहते हैं flexऔर justify-content: center;, तो हम एक डमी liतत्व जोड़कर और इसे असाइन कर सकते हैं margin-left।

    const handleResize = () => {
        const item_box = document.getElementById('parentId')
        const list_length  = item_box.clientWidth
        const product_card_length = 200 // length of your child element
        const item_in_a_row = Math.round(list_length/product_card_length)
        const to_be_added = item_in_a_row - parseInt(listObject.length % item_in_a_row) // listObject is the total number items
        const left_to_set = (to_be_added - 1 ) * product_card_length // -1 : dummy item has width set, so exclude it when calculating the left margin 
        const dummy_product = document.querySelectorAll('.product-card.dummy')[0]
        dummy_product.style.marginLeft = `${left_to_set}px`
    }
    handleResize() // Call it first time component mount
    window.addEventListener("resize", handleResize); 

संदर्भ के लिए इस फ़िडेल (आकार बदलें और देखें) या वीडियो देखें

Answer 4

मार्जिन के साथ वांछित शैली प्राप्त करने का एक तरीका निम्नलिखित है:

#container {
    display: flex;
    justify-content: center;
}

#innercontainer {
    display: flex;
    flex: 0.9; -> add desired % of margin
    justify-content: flex-start;
}

Answer 5

आप अदृश्य तत्वों को उसी वर्ग के साथ रख सकते हैं जो अन्य (उदाहरण के लिए हटाए गए उद्देश्यों के लिए हटा दिया गया) और ऊँचाई ०. पर सेट है। इसके साथ ही आप ग्रिड की शुरुआत के लिए वस्तुओं को सही ठहराने में सक्षम होंगे।

उदाहरण

<div class="table-container">
  <div class="table-content">
    <p class="table-title">Table 1</p>
    <p class="mesa-price">$ 20</p>
  </div>
  
  <!-- Make stuff justified start -->
  <div class="table-content" style="opacity: 0; cursor: default; height: 0; margin-bottom: 0;"></div>
  <div class="table-content" style="opacity: 0; cursor: default; height: 0; margin-bottom: 0;"></div>
  <div class="table-content" style="opacity: 0; cursor: default; height: 0; margin-bottom: 0;"></div>
  <div class="table-content" style="opacity: 0; cursor: default; height: 0; margin-bottom: 0;"></div>
</div>

परिणाम

Answer 6

फ्लेक्स के अंदर सामग्री को केंद्र में रखने की कोशिश करते समय मैं इसी तरह के मुद्दे का सामना कर रहा था। मैंने बहुत सारी तरकीबें और कोशिशें कीं लेकिन यह सिर्फ एक मूर्खतापूर्ण त्रुटि के कारण काम नहीं कर रहा था।

अगर यहां आने वाला कोई व्यक्ति इन उत्तरों को पढ़ने के बाद भी समस्या के आसपास नहीं पहुंच पाता है, तो मूर्खतापूर्ण गलतियों के लिए जांच करने का प्रयास करें। मेरे मामले में यह एक था spanके साथ flex-growकरने के लिए सेट 1एक स्पेसर के रूप में जोड़ा।

Answer 7

मैं रिएक्ट नेटिव के साथ कोडिंग करते हुए इस समस्या में भाग गया। वहाँ एक सुंदर समाधान है कि आप FlexBox का उपयोग कर सकते हैं। अपनी विशेष स्थिति में, मैं तीन फ्लेक्स बॉक्स (Flex: 2) को एक दूसरे के अंदर संरेखित करते हुए संरेखित करने का प्रयास कर रहा था। मैं जिस समाधान के साथ आया था, वह दो खाली s का उपयोग कर रहा था, प्रत्येक Flex: 1 के साथ।

<View style={{alignItems: 'center', flexWrap: 'wrap', flexDirection: 'row'}}>
  <View style={{flex: 1}} />
    // Content here
  <View style={{flex: 1}} />
</View>

वेब / सीएसएस में परिवर्तित करने के लिए काफी आसान है।

Comments

आपने प्रश्न को गलत समझा है। ओपी यह नहीं पूछता कि 3 आइटम को कैसे केंद्र करें, वे पूछते हैं कि एक पंक्ति के रूप में आइटम को दूसरी पंक्ति में कैसे छोड़ा जाए, जबकि सभी आइटम समूह के रूप में केंद्र होते हैं, और इसके लिए आपका समाधान काम नहीं करता है।

— असॉन