फ्लेक्सबॉक्स आइटम को समान आकार कैसे बनाएं?

Question

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

उदाहरण के लिए:

.header {
  display: flex;
}

.item {
  flex-grow: 1;
  text-align: center;
  border: 1px solid black;
}

<div class="header">
  <div class="item">asdfasdfasdfasdfasdfasdf</div>
  <div class="item">z</div>
</div>

पहला आइटम दूसरे से बहुत बड़ा है। यदि मेरे पास 3 आइटम, 4 आइटम, या एन आइटम हैं, तो मैं चाहता हूं कि वे सभी एक ही पंक्ति में प्रति आइटम के बराबर स्थान के साथ दिखाई दें।

कोई विचार?

http://codepen.io/anon/pen/gbJBqM

Answer 1

उन्हें इतना सेट उनके कि flex-basisहै 0(ताकि सभी तत्वों को एक ही प्रारंभिक बिंदु है), और उन्हें विकसित करने के लिए अनुमति देते हैं:

flex: 1 1 0px

आपके आईडीई या लाइनर का उल्लेख हो सकता है the unit of measure 'px' is redundant। यदि आप इसे छोड़ देते हैं (जैसे flex: 1 1 0:), तो IE इसे सही ढंग से प्रस्तुत नहीं करेगा। तो pxइंटरनेट एक्सप्लोरर का समर्थन करना आवश्यक है, जैसा कि @fabb द्वारा टिप्पणियों में वर्णित है;

Comments

यह ध्यान दिया जाना चाहिए कि flexसंपत्ति flex-grow, flex-shrinkऔर flex-basisगुणों के लिए एक आशुलिपि संपत्ति है । यह व्यक्तिगत गुणों पर शॉर्टहैंड का उपयोग करने की सिफारिश की जाती है क्योंकि शॉर्टहैंड किसी भी अनिर्दिष्ट घटक को आम उपयोगों को समायोजित करने के लिए सही ढंग से रीसेट करता है। प्रारंभिक मूल्य है 0 1 auto।

— j08691

ध्यान दें कि IE11

— यूनिटलेस

मुझे min-width: 0अतिप्रवाहित पाठ के साथ बाल तत्वों का उपयोग करने के लिए जोड़ना था । देखें css-tricks.com/flexbox-truncated-text

— Iwazaru

Answer 2

आप flex-basis: 100%इसे प्राप्त करने के लिए जोड़ सकते हैं ।

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

.header {
  display: flex;
}

.item {
  flex-basis: 100%;
  text-align: center;
  border: 1px solid black;
}

जो इसके लायक है, आप flex: 1उसी परिणाम के लिए भी उपयोग कर सकते हैं ।

का आशुलिपि flex: 1वही है flex: 1 1 0, जो इसके बराबर है:

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  text-align: center;
  border: 1px solid black;
}

Comments

यह सही नहीं है। डिफ़ॉल्ट फ्लेक्स मूल्य है flex: 0 1 auto। जिसका अर्थ है सेटिंग flex: 1में परिणाम होगा flex: 1 1 auto। यह काम नहीं करेगा। सही उत्तर flex: 1 1 0जैसा कि ऊपर कहा गया है एडम

— r.sendecky

@ r.sendecky नहीं, आप गलत हैं। के रूप में मैं अपने जवाब में कहा गया है, की आशुलिपि flex: 1में परिणाम flex: 1 1 0 नहीं flex: 1 1 auto है जैसे आप दावा कर रहे हैं। 'फ्लेक्स शॉर्टहैंड' अनुभाग के तहत आधिकारिक W3 विनिर्देश पर एक नज़र डालें : जब flex-basis"फ्लेक्स शॉर्टहैंड से छोड़ा गया है, तो इसका निर्दिष्ट मूल्य 0" है, नहीं auto। यादृच्छिक downvote के लिए धन्यवाद।

— जोश क्रॉजियर

@ r.sendecky - इसके अलावा, इस उदाहरण पर एक नज़र डालें, जिसे मैंने विविधताओं की कल्पना करने के लिए बनाया था।

— जोश क्रॉजियर

मेट, मैं रैंडम डाउन-वोट नहीं करता हूं। मैं लिखने से पहले परीक्षण करता हूं। और मैंने इसका परीक्षण किया। आपका जवाब काम नहीं करता - जैसा कि सरल है। मैं वास्तव में एक ही मुद्दा नहीं था बहुत पहले flex: 1और flex-direction: column। जब बच्चों के भीतर अन्य तत्व रखे जाते हैं तो बच्चों की ऊंचाई समान नहीं होती थी। केवल एक चीज जो इसे तय करती थी flex: 1 1 0। यह आज भी क्रोमियम 55.0.2883.87

— r.sendecky

@JoshCrozier पुष्टि की है कि flex: 1के रूप में ही व्यवहार किया है flex: 1 1 0, और flex: 0 1 autoअलग व्यवहार है।

— इवान डर्स्ट

Answer 3

आपको width: 0कॉलम को समान बनाने के लिए जोड़ने की आवश्यकता है यदि आइटम की सामग्री इसे बड़ा बनाती है।

.item {
  flex: 1 1 0;
  width: 0;
}

Comments

यह आवश्यक प्रतीत होता है अगर .itemकारण की सामग्री .itemस्वाभाविक रूप से व्यापक होने की वजह से व्यापक होगी।

— जंगल

मुझे लगता है कि आप का मतलब है flex: 1 1 0;, के बजायflex-grow: 1 1 0;

— चिकन सूप

फी, लिंक टूट गया है

— बॉबी जैक

करने के flex-basisलिए सेटिंग के 0रूप में एक ही उद्देश्य में कार्य करता widthहै 0।

— स्टीफन

मेरे उपयोग के मामले में, मैं उन चार्टों को लपेट रहा था जो गतिशील रूप से उनके माता-पिता के आकार और चौड़ाई में समायोजित होते थे, उनके लिए काम करना आवश्यक था। मुझे यकीन नहीं है कि वे उचित चौड़ाई का निर्धारण कैसे कर रहे थे, लेकिन फ्लेक्स आधार निश्चित रूप से क्रोम 72 (जनवरी 2019 को जारी) पर काम नहीं करता था।

— एंडी ग्रॉफ

Answer 4

एडम ( flex: 1 1 0) द्वारा स्वीकृत उत्तर फ्लेक्सबॉक्स कंटेनरों के लिए पूरी तरह से काम करता है जिनकी चौड़ाई या तो निश्चित है, या पूर्वजों द्वारा निर्धारित की गई है। स्थिति जहां आप चाहते हैं कि बच्चे कंटेनर को फिट करें।

हालांकि, आपके पास एक ऐसी स्थिति हो सकती है जहां आप चाहते हैं कि कंटेनर बच्चों के लायक हो, जिसमें बच्चे सबसे बड़े बच्चे के आधार पर समान आकार के हों। आप अपने बच्चों द्वारा फ्लेक्सबॉक्स कंटेनर को या तो फिट कर सकते हैं:

• सेटिंग position: absoluteऔर सेटिंग widthया right, या नहीं
• इसे रैपर के अंदर रखें display: inline-block

ऐसे फ्लेक्सबॉक्स कंटेनरों के लिए, स्वीकृत उत्तर काम नहीं करता है, बच्चों को समान रूप से आकार नहीं दिया जाता है। मुझे लगता है कि यह फ्लेक्सबॉक्स की एक सीमा है, क्योंकि यह क्रोम, फ़ायरफ़ॉक्स और सफारी में समान व्यवहार करता है।

समाधान फ्लेक्सबॉक्स के बजाय ग्रिड का उपयोग करना है।

डेमो: https://codepen.io/brettdonald/pen/oRpORG

<p>Normal scenario — flexbox where the children adjust to fit the container — and the children are made equal size by setting {flex: 1 1 0}</p>

<div id="div0">
  <div>
    Flexbox
  </div>
  <div>
    Width determined by viewport
  </div>
  <div>
    All child elements are equal size with {flex: 1 1 0}
  </div>
</div>

<p>Now we want to have the container fit the children, but still have the children all equally sized, based on the largest child. We can see that {flex: 1 1 0} has no effect.</p>

<div class="wrap-inline-block">
<div id="div1">
  <div>
    Flexbox
  </div>
  <div>
    Inside inline-block
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>
</div>

<div id="div2">
  <div>
    Flexbox
  </div>
  <div>
    Absolutely positioned
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>

<br><br><br><br><br><br>
<p>So let's try a grid instead. Aha! That's what we want!</p>

<div class="wrap-inline-block">
<div id="div3">
  <div>
    Grid
  </div>
  <div>
    Inside inline-block
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>
</div>

<div id="div4">
  <div>
    Grid
  </div>
  <div>
    Absolutely positioned
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>

body {
  margin: 1em;
}

.wrap-inline-block {
  display: inline-block;
}

#div0, #div1, #div2, #div3, #div4 {
  border: 1px solid #888;
  padding: 0.5em;
  text-align: center;
  white-space: nowrap;
}

#div2, #div4 {
  position: absolute;
  left: 1em;
}

#div0>*, #div1>*, #div2>*, #div3>*, #div4>* {
  margin: 0.5em;
  color: white;
  background-color: navy;
  padding: 0.5em;
}

#div0, #div1, #div2 {
  display: flex;
}

#div0>*, #div1>*, #div2>* {
  flex: 1 1 0;
}

#div0 {
  margin-bottom: 1em;
}

#div2 {
  top: 15.5em;
}

#div3, #div4 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
}

#div4 {
  top: 28.5em;
}

Answer 5

मैं फ्लेक्स के साथ कोई विशेषज्ञ नहीं हूं, लेकिन मैं उन दो वस्तुओं के लिए 50% का आधार निर्धारित करके वहां पहुंच गया, जिनके साथ मैं काम कर रहा था। 1 तक बढ़ें और 0 से सिकुड़ें।

इनलाइन स्टाइल: flex: '1 0 50%',