मध्य आइटम को तब रखें जब साइड आइटम में अलग-अलग चौड़ाई हो

Question

निम्नलिखित लेआउट की कल्पना करें, जहां डॉट्स बक्से के बीच की जगह का प्रतिनिधित्व करते हैं:

[Left box]......[Center box]......[Right box]

जब मैं सही बॉक्स को हटाता हूं, तो मैं केंद्र बॉक्स को अभी भी केंद्र में रखना पसंद करता हूं, जैसे:

[Left box]......[Center box].................

उसी के लिए जाता है अगर मैं बाएं बॉक्स को हटा दूंगा।

................[Center box].................

अब जब केंद्र बॉक्स के भीतर की सामग्री अधिक लंबी हो जाती है, तो उसे शेष रहते हुए आवश्यकतानुसार उतनी ही जगह उपलब्ध होगी। बाएँ और दाएँ बॉक्स कभी नहीं सिकुड़ेंगे और इस तरह जब कोई जगह नहीं बची है overflow:hiddenऔर text-overflow: ellipsisसामग्री को तोड़ने के लिए प्रभावी होगा;

[Left box][Center boxxxxxxxxxxxxx][Right box]

उपरोक्त सभी मेरी आदर्श स्थिति है, लेकिन मुझे नहीं पता कि इस प्रभाव को कैसे पूरा किया जाए। क्योंकि जब मैं एक फ्लेक्स संरचना जैसा बनाता हूं:

.parent {
    display : flex; // flex box
    justify-content : space-between; // horizontal alignment
    align-content   : center; // vertical alignment
}

यदि बाएं और दाएं बॉक्स बिल्कुल समान आकार के होंगे, तो मुझे वांछित प्रभाव मिलेगा। हालाँकि जब दोनों में से कोई एक अलग आकार का होता है तो केन्द्रित बॉक्स अब वास्तव में केंद्रित नहीं होता है।

क्या कोई है जो मेरी मदद कर सकता है?

अपडेट करें

एक justify-selfअच्छा होगा, यह आदर्श होगा:

.leftBox {
     justify-self : flex-start;
}

.rightBox {
    justify-self : flex-end;
}

Comments

मूल रूप से ... आप नहीं कर सकते। ऐसा नहीं है कि कैसे flexboxकाम करना है। आप दूसरी कार्यप्रणाली आज़मा सकते हैं।

— पॉलि_डी 14

यह वास्तव में flexo पूरा होगा अगर यह किया था। कारण Flexbox अंतरिक्ष के वितरण के बारे में है और आइटम कैसे व्यवहार करते हैं।

— मार्क

हमने justify-selfआज पहले चर्चा की , इसलिए आपको यह दिलचस्प लग सकता है: stackoverflow.com/questions/32551291/…

— माइकल बेंजामिन

Answer 1

यदि बाएं और दाएं बॉक्स बिल्कुल समान आकार के होंगे, तो मुझे वांछित प्रभाव मिलेगा। हालाँकि जब दोनों में से कोई एक अलग आकार का होता है तो केंद्रित बॉक्स वास्तव में अब केंद्रित नहीं होता है। क्या कोई है जो मेरी मदद कर सकता है?

भाई-बहनों की चौड़ाई की परवाह किए बिना मध्य आइटम को केंद्रित करने के लिए फ्लेक्सबॉक्स का उपयोग करने की एक विधि यहां दी गई है।

प्रमुख विशेषताऐं:

• शुद्ध सीएसएस
• कोई पूर्ण स्थिति नहीं
• कोई JS / jQuery नहीं

नेस्टेड फ्लेक्स कंटेनर और autoमार्जिन का उपयोग करें :

.container {
  display: flex;
}
.box {
  flex: 1;
  display: flex;
  justify-content: center;
}

.box:first-child > span { margin-right: auto; }

.box:last-child  > span { margin-left: auto;  }

/* non-essential */
.box {
  align-items: center;
  border: 1px solid #ccc;
  background-color: lightgreen;
  height: 40px;
}
p {
  text-align: center;
  margin: 5px 0 0 0;
}

<div class="container">
  <div class="box"><span>short text</span></div>
  <div class="box"><span>centered text</span></div>
  <div class="box"><span>loooooooooooooooong text</span></div>
</div>
<p>&#8593;<br>true center</p>

यहां देखिए यह कैसे काम करता है:

• शीर्ष-स्तरीय div ( .container) एक फ्लेक्स कंटेनर है।
• प्रत्येक बाल div ( .box) अब एक फ्लेक्स आइटम है।
• प्रत्येक स्थान को कंटेनर स्पेस को समान रूप से वितरित करने के लिए .boxदिया flex: 1जाता है ( अधिक विवरण )।
• अब आइटम पंक्ति में सभी स्थान का उपभोग कर रहे हैं और समान चौड़ाई के हैं।
• प्रत्येक आइटम को (नेस्टेड) ​​फ्लेक्स कंटेनर बनाएं और जोड़ें justify-content: center।
• अब प्रत्येक spanतत्व एक केंद्रित फ्लेक्स आइटम है।
• autoबाहरी spanएस को बाएँ और दाएँ स्थानांतरित करने के लिए फ्लेक्स मार्जिन का उपयोग करें ।

आप विशेष रूप से मार्जिन को त्याग justify-contentऔर उपयोग कर सकते हैं auto।

लेकिन justify-contentयहां काम कर सकते हैं क्योंकि autoमार्जिन में हमेशा प्राथमिकता होती है।

8.1। auto मार्जिन के साथ संरेखित करना

के माध्यम से संरेखण से पहले justify-contentऔर align-self, किसी भी सकारात्मक मुक्त स्थान को उस आयाम में ऑटो मार्जिन को वितरित किया जाता है।

Comments

यह समाधान widthनिर्दिष्ट करने की अनुमति नहीं देता

— एलेक्स जी

@AlexG, ऐसा कैसे? क्या आप एक उदाहरण प्रदान कर सकते हैं?

— माइकल बेंजामिन

स्थान को वितरित करने के लिए लचीले तत्वों की चौड़ाई को बदलना समान रूप से ओपी के प्रश्न को पूरी तरह से याद करता है। उनके सवाल में तत्वों के बीच जगह है। Ex: "निम्नलिखित लेआउट की कल्पना करें, जहां डॉट्स बक्से के बीच की जगह का प्रतिनिधित्व करते हैं।" 3 समान आकार के तत्वों में पाठ को केंद्रित करना तुच्छ है।

— लेलैंड

मैं कसम खाता हूँ मैं तो बस आप अभी चुंबन सकता है! यह वही है जो मुझे चाहिए था और समझ नहीं पाया।

— इलियट रोसवाटर

यह वास्तव में मैकओएस शैली की खिड़की के टाइटलबार को लागू करने के लिए आवश्यक था। white-space: nowrapजब क्षेत्र बहुत छोटा हो जाता है, तो पाठ को लपेटने से रोकने के लिए पहेली का अंतिम टुकड़ा जोड़ना था।

— 1:10 पर Geo1088

Answer 2

1. कंटेनर में तीन फ्लेक्स आइटम का उपयोग करें
2. flex: 1पहले और आखिरी वाले को सेट करें । यह उन्हें मध्य एक द्वारा छोड़े गए उपलब्ध स्थान को भरने के लिए समान रूप से विकसित करता है।
3. इस प्रकार, मध्य एक केंद्रित हो जाएगा।

4. हालांकि, यदि पहले या अंतिम आइटम में एक विस्तृत सामग्री है, तो नए min-width: autoप्रारंभिक मूल्य के कारण फ्लेक्स आइटम भी बढ़ेगा ।

   नोट Chrome इसे ठीक से लागू नहीं करता है। हालांकि, अगर आप सेट कर सकते हैं min-widthकरने के लिए-webkit-max-content या -webkit-min-contentऔर यह भी काम करेगा।

5. केवल उस स्थिति में मध्य तत्व को केंद्र से बाहर धकेल दिया जाएगा।

.outer-wrapper {
  display: flex;
}
.item {
  background: lime;
  margin: 5px;
}
.left.inner-wrapper, .right.inner-wrapper {
  flex: 1;
  display: flex;
  min-width: -webkit-min-content; /* Workaround to Chrome bug */
}
.right.inner-wrapper {
  justify-content: flex-end;
}
.animate {
  animation: anim 5s infinite alternate;
}
@keyframes anim {
  from { min-width: 0 }
  to { min-width: 100vw; }
}

<div class="outer-wrapper">
  <div class="left inner-wrapper">
    <div class="item animate">Left</div>
  </div>
  <div class="center inner-wrapper">
    <div class="item">Center</div>
  </div>
  <div class="right inner-wrapper">
    <div class="item">Right</div>
  </div>
</div>
<!-- Analogous to above --> <div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">Left</div></div><div class="center inner-wrapper"><div class="item animate">Center</div></div><div class="right inner-wrapper"><div class="item">Right</div></div></div><div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">Left</div></div><div class="center inner-wrapper"><div class="item">Center</div></div><div class="right inner-wrapper"><div class="item animate">Right</div></div></div>

Comments

धन्यवाद, यह उत्तर सफलतापूर्वक स्वीकार किए गए जवाब के विपरीत, ओपी प्रश्न का उत्तर देता है

— ब्लोसी

Answer 3

फ्लेक्सबॉक्स का उपयोग करने के लिए डिफ़ॉल्ट करने के बजाय, ग्रिड का उपयोग करके इसे सीएसएस की 2 पंक्तियों में शीर्ष स्तर के बच्चों के अंदर अतिरिक्त मार्कअप के बिना हल करता है।

HTML:

<header class="header">
  <div class="left">variable content</div>
  <div class="middle">variable content</div>
  <div class="right">variable content which happens to be very long</div>
</header>

सीएसएस:

.header {
  display: grid;
  grid-template-columns: [first] 20% auto [last] 20%;
}
.middle {
  /* use either */
  margin: 0 auto;
  /* or */
  text-align: center;
}

Flexbox चट्टानों लेकिन सब कुछ के लिए जवाब नहीं होना चाहिए। इस मामले में ग्रिड स्पष्ट रूप से सबसे साफ विकल्प है।

यहां तक ​​कि अपने परीक्षण सुख के लिए एक कोडपेन भी बनाया: https://codepen.io/anon/pen/mooQOV

Comments

+1 स्वीकार करने के लिए कि flexहर चीज के लिए अन्य विकल्प हो सकते हैं। मेरी केवल आपत्ति यह है कि ऊर्ध्वाधर संरेखण फ्लेक्स का उपयोग करके आसान हो जाता है ( align-items: center) यदि आपके आइटम अलग-अलग ऊंचाइयां हैं और गठबंधन करने की आवश्यकता है

— फेलिप

मुझे यह समाधान पसंद है और इस समस्या के लिए ग्रिड का उपयोग करने का विचार है, लेकिन मुझे लगता है कि आपके समाधान में कुछ उल्लेखनीय कमियां हैं। सबसे पहले, यदि बाहरी कोशिकाओं की सामग्री 20% से अधिक है, तो सामग्री या तो केंद्र कक्ष में लपेटने या ओवरफ़्लो होने वाली है। दूसरा, यदि केंद्र 60% से बड़ा है, तो यह अपने सामग्री बॉक्स के बाहर बढ़ने जा रहा है और अंतिम सेल को या तो लपेटें या धक्का दें। अंत में, बाहरी कोशिकाओं के लिए जगह बनाने के लिए केंद्र शिफ्ट नहीं होता है। यह बस उन्हें लपेटने / अतिप्रवाह करने के लिए मजबूर करता है। यह एक बुरा समाधान नहीं है, लेकिन IMO, यह "स्पष्ट रूप से सबसे साफ विकल्प" नहीं है।

— क्रिस

Answer 4

आप ऐसा कर सकते हैं:

.bar {
    display: flex;    
    background: #B0BEC5;
}
.l {
    width: 50%;
    flex-shrink: 1;
    display: flex;
}
.l-content {
    background: #9C27B0;
}
.m { 
    flex-shrink: 0;
}
.m-content {    
    text-align: center;
    background: #2196F3;
}
.r {
    width: 50%;
    flex-shrink: 1;
    display: flex;
    flex-direction: row-reverse;
}
.r-content { 
    background: #E91E63;
}

<div class="bar">
    <div class="l">
        <div class="l-content">This is really long content.  More content.  So much content.</div>
    </div>
    <div class="m">
        <div class="m-content">This will always be in the center.</div>
    </div>
    <div class="r">
        <div class="r-content">This is short.</div>
    </div>
</div>

Answer 5

यहाँ एक जवाब है कि flexbox के बजाय ग्रिड का उपयोग करता है। इस समाधान को HTML में अतिरिक्त पोते तत्वों की आवश्यकता नहीं है जैसे स्वीकृत उत्तर करता है। और यह तब भी सही ढंग से काम करता है जब 2019 के ग्रिड उत्तर के विपरीत, एक तरफ की सामग्री केंद्र में ओवरफ्लो करने के लिए लंबे समय तक पर्याप्त हो।

एक समाधान जो यह नहीं करता है वह एक दीर्घवृत्त दिखाता है या केंद्र बॉक्स में अतिरिक्त सामग्री को छिपाता है, जैसा कि प्रश्न में वर्णित है।

section {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

section > *:last-child {
  white-space: nowrap;
  text-align: right;
}

/* not essential; just for demo purposes */
section {
  background-color: #eee;
  font-family: helvetica, arial;
  font-size: 10pt;
  padding: 4px;
}

section > * {
  border: 1px solid #bbb;
  padding: 2px;
}

<section>
  <div>left</div>
  <div>center</div>
  <div>right side is longer</div>
</section>

<section>
  <div>left</div>
  <div>center</div>
  <div>right side is much, much longer</div>
</section>

<section>
  <div>left</div>
  <div>center</div>
  <div>right side is much, much longer, super long in fact</div>
</section>

Answer 6

display: flexमाता-पिता और बच्चों में इसका उपयोग करने का एक और तरीका है :

.Layout{
    display: flex;
    justify-content: center;
}
.Left{
    display: flex;
    justify-content: flex-start;
    width: 100%;
}
.Right{
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

<div class = 'Layout'>
    <div class = 'Left'>I'm on the left</div>
    <div class = 'Mid'>Centered</div>
    <div class = 'Right'>I'm on the right</div>
</div>

Answer 7

आप मध्य तत्व के लिए सटीक केंद्र संरेखण तक पहुंचने के लिए इस सरल तरीके का भी उपयोग कर सकते हैं:

.container {
    display: flex;
    justify-content: space-between;
}

.container .sibling {
    display: flex;
    align-items: center;
    height: 50px;
    background-color: gray;
}

.container .sibling:first-child {
    width: 50%;
    display: flex;
    justify-content: space-between;
}

.container .sibling:last-child {
    justify-content: flex-end;
    width: 50%;
    box-sizing: border-box;
    padding-left: 100px; /* .center's width divided by 2 */
}

.container .sibling:last-child .content {
    text-align: right;
}

.container .sibling .center {
    height: 100%;
    width: 200px;
    background-color: lightgreen;
    transform: translateX(50%);
}

कोडपेन: https://codepen.io/ErAz7/pen/mdeBKLG