फ्लेक्सबॉक्स कॉलम को बाएं और दाएं कैसे संरेखित करें?

Question

विशिष्ट सीएसएस के साथ मैं दो गोटों में से एक को छोड़ सकता हूं और दूसरा गटर स्पेस के बीच में। फ्लेक्सबॉक्स के साथ मैं ऐसा कैसे करूंगा?

http://jsfiddle.net/1sp9jd32/

#container {
  width: 500px;
  border: solid 1px #000;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
#a {
  width: 20%;
  border: solid 1px #000;
}
#b {
  width: 20%;
  border: solid 1px #000;
  height: 200px;
}

<div id="container">
  <div id="a">
    a
  </div>
  <div id="b">
    b
  </div>
</div>

Answer 1

आप justify-content: space-betweenमूल तत्व में जोड़ सकते हैं । ऐसा करने पर, बच्चों के फ्लेक्सबॉक्स आइटम को उनके बीच की जगह के साथ विपरीत पक्षों से जोड़ दिया जाएगा।

अपडेटेड उदाहरण

#container {
    width: 500px;
    border: solid 1px #000;
    display: flex;
    justify-content: space-between;
}

#container {
    width: 500px;
    border: solid 1px #000;
    display: flex;
    justify-content: space-between;
}

#a {
    width: 20%;
    border: solid 1px #000;
}

#b {
    width: 20%;
    border: solid 1px #000;
    height: 200px;
}

<div id="container">
    <div id="a">
        a
    </div>
    <div id="b">
        b
    </div>
</div>

---

आप margin-left: autoइसे दाईं ओर संरेखित करने के लिए दूसरे तत्व में भी जोड़ सकते हैं ।

अपडेटेड उदाहरण

#b {
    width: 20%;
    border: solid 1px #000;
    height: 200px;
    margin-left: auto;
}

#container {
    width: 500px;
    border: solid 1px #000;
    display: flex;
}

#a {
    width: 20%;
    border: solid 1px #000;
    margin-right: auto;
}

#b {
    width: 20%;
    border: solid 1px #000;
    height: 200px;
    margin-left: auto;
}

<div id="container">
    <div id="a">
        a
    </div>
    <div id="b">
        b
    </div>
</div>

Comments

अरे, क्या आप यह बता सकते हैं कि margin-left: autoयहाँ उपयोग करके तत्व कैसे सही ढंग से संरेखित हो जाता है?

— hulkinBrain

@hulkinBrain, यहाँ स्पष्टीकरण है: stackoverflow.com/a/33856609/3597276

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

ध्यान दें: margin-left: autoऔर margin-right: autoट्रिक IE11 संगत नहीं है, उन लोगों के लिए जिन्हें अभी भी इसका समर्थन करना है।

— तेतरादेव

Answer 2

मैं परिणाम प्राप्त करने के लिए 4 तरीकों के साथ आया था। यहाँ डेमो है

विधि 1:

#a {
    margin-right: auto;
}

विधि 2:

#a {
    flex-grow: 1;
}

विधि 3:

#b {
    margin-left: auto;
}

विधि 4:

#container {
    justify-content: space-between;
}

Comments

विधि 5: flex:1;जहाँ आप अतिरिक्त स्थान चाहते हैं, उसके साथ एक अतिरिक्त खाली तत्व डालें :)

— adamdport

यदि आप jsfiddle से लिंक करने के बजाय कोड स्निपेट एम्बेड करते हैं तो यह सबसे अच्छा, सबसे पूर्ण उत्तर होगा।

— 19

विधि 1 और 3 IE 11 के साथ संगत नहीं है!

— पीटर होज़लंड एंडरसन

Answer 3

एक अन्य विकल्प flex: autoआपके टैग के बीच में शैली के साथ एक और टैग जोड़ना है जिसे आप शेष स्थान पर भरना चाहते हैं।

https://jsfiddle.net/tsey5qu4/

HTML:

<div class="parent">
  <div class="left">Left</div>
  <div class="fill-remaining-space"></div>
  <div class="right">Right</div>
</div>

सीएसएस:

.fill-remaining-space {
  flex: auto;
}

यह फ्लेक्स के बराबर है: 1 1 ऑटो, जो मुख्य अक्ष के साथ किसी भी अतिरिक्त स्थान को अवशोषित करता है।

Answer 4

अलग-अलग तरीके हैं लेकिन अंत में उदाहरण देखने के लिए अंतरिक्ष के बीच का उपयोग करना सबसे सरल होगा

#container {    
    border: solid 1px #000;
    display: flex;    
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
    height: 50px;
}

.item {
    width: 20%;
    border: solid 1px #000;
    text-align: center;
}

उदाहरण देखें