बनाओ फ्लेक्स आइटम सामग्री की चौड़ाई लेते हैं, मूल कंटेनर की चौड़ाई नहीं

Question

मेरे पास एक कंटेनर <div>है display: flex। इसका एक बच्चा है <a>।

मैं बच्चे को "इनलाइन" कैसे दिखा सकता हूं?

विशेष रूप से, मैं अपनी सामग्री से बच्चे की चौड़ाई कैसे निर्धारित कर सकता हूं, और माता-पिता की चौड़ाई तक नहीं बढ़ा सकता हूं?

मैंने क्या कोशिश की:

मैंने बच्चे को सेट किया display: inline-flex, लेकिन इसने पूरी चौड़ाई ले ली। मैंने अन्य सभी प्रदर्शन गुणों की भी कोशिश की, लेकिन कुछ भी प्रभाव नहीं पड़ा।

उदाहरण:

.container {
  background: red;
  height: 200px;
  flex-direction: column;
  padding: 10px;
  display: flex;
}
a {
  display: inline-flex;
  padding: 10px 40px;
  background: pink;
}

<div class="container">
  <a href="#">Test</a>
</div>

http://codepen.io/donpinkus/pen/YGRxRY

Answer 1

align-items: flex-startकंटेनर पर, या align-self: flex-startफ्लेक्स आइटम पर उपयोग करें ।

की कोई जरूरत नहीं display: inline-flex।

---

एक फ्लेक्स कंटेनर की प्रारंभिक सेटिंग है align-items: stretch। इसका मतलब है कि फ्लेक्स आइटम क्रॉस एक्सिस के साथ कंटेनर की पूरी लंबाई को कवर करने के लिए विस्तारित होंगे।

align-selfसंपत्ति के रूप में एक ही बात करता है align-itemsसिवाय इसके कि, align-selfपर लागू होता है फ्लेक्स आइटम , जबकि align-itemsपर लागू होता है फ्लेक्स कंटेनर ।

डिफ़ॉल्ट रूप से, align-selfका मान प्राप्त होता है align-items।

चूंकि आपका कंटेनर है flex-direction: column, क्रॉस एक्सिस क्षैतिज है, और align-items: stretchजितना हो सके बाल तत्व की चौड़ाई का विस्तार कर रहा है।

आप align-items: flex-startकंटेनर (जो सभी फ्लेक्स आइटम द्वारा विरासत में मिला है) या align-self: flex-startआइटम पर (जो एकल आइटम तक सीमित है ) के साथ डिफ़ॉल्ट को ओवरराइड कर सकते हैं ।

---

यहाँ क्रॉस अक्ष के साथ फ्लेक्स अलाइनमेंट के बारे में अधिक जानें :

• एलाइन-सेल्फ, अलाइन-आइटम और अलाइन-कंटेंट के साथ फ्लेक्स-रैप कैसे काम करता है?

यहाँ मुख्य अक्ष के साथ फ्लेक्स अलाइनमेंट के बारे में अधिक जानें :

• CSS Flexbox में, कोई "औचित्य-आइटम" और "औचित्य-स्व" गुण क्यों नहीं हैं?

Answer 2

लत में align-selfआप ऑटो मार्जिन पर भी विचार कर सकते हैं जो लगभग एक ही काम करेगा

.container {
  background: red;
  height: 200px;
  flex-direction: column;
  padding: 10px;
  display: flex;
}
a {
  margin-right:auto;
  padding: 10px 40px;
  background: pink;
}

<div class="container">
  <a href="#">Test</a>
</div>