फ्लेक्स क्या है: 1 का मतलब?

Question

हम सभी जानते हैं, flexसंपत्ति के लिए एक आशुलिपि है flex-grow, flex-shrinkऔर flex-basisगुण। इसका डिफ़ॉल्ट मान है 0 1 auto, जिसका अर्थ है

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

लेकिन मैंने देखा है, कई स्थानों flex: 1पर उपयोग किया जाता है। क्या यह शॉर्टहैंड है 1 1 autoया 1 0 auto? मुझे समझ नहीं आ रहा है कि इसका क्या मतलब है और मुझे कुछ भी नहीं है जब मैं Google।

Comments

w3schools.com का हवाला देते हुए "फ्लेक्स-प्रॉपर्टी, फ्लेक्स-ग्रो, फ्लेक्स-हटना और फ्लेक्स-बेस गुणों के लिए एक शॉर्टहैंड है"

— इमरान अली

Answer 1

यहाँ स्पष्टीकरण है:

https://www.w3.org/TR/css-flexbox-1/#flex-common

फ्लेक्स: <पॉजिटिव-नंबर>
फ्लेक्स के बराबर: <पॉजिटिव-नंबर> 1 0. फ्लेक्स आइटम को फ्लेक्सिबल बनाता है और फ्लेक्स बेस को शून्य पर सेट करता है, जिसके परिणामस्वरूप एक ऐसा आइटम मिलता है, जो फ्लेक्स कंटेनर में फ्री स्पेस का निर्दिष्ट अनुपात प्राप्त करता है। यदि फ्लेक्स कंटेनर में सभी आइटम इस पैटर्न का उपयोग करते हैं, तो उनका आकार निर्दिष्ट फ्लेक्स फैक्टर के समानुपाती होगा।

इसलिए flex:1के बराबर हैflex: 1 1 0

Comments

फ्लेक्स: 1; समान फ्लेक्स नहीं है: 1 1 0; नीचे आरओ मेरा जवाब देखें क्यों देखें।

— ड्रीमटेके

एक साइड-नोट पर: मुझे लगता है कि जब आप flexसभी बच्चों के लिए एक ही आवेदन कर रहे हैं , तो वास्तव में क्या मायने रखता है flex: 1 ? 0;, जहां "?" कुछ भी हो सकता है, यह कोई फर्क नहीं होगा

— Flen

@DreamTeK केवल क्रोम जैसे गैर-मानक-अनुरूप ब्राउज़र में।

— टायलरएच

@TylerH सही और मेरे उत्तर में उल्लेखित हालांकि what does flex:1 mean?व्याख्या के लिए खुला है। ऑप्स कल्पना के लिए नहीं पूछता है, केवल जो हो रहा है उसके लिए। दुर्भाग्य से क्रोम अब सबसे लोकप्रिय ब्राउज़र है और समर्थन की आवश्यकता है। मैं खुद क्रोम का प्रशंसक या उपयोगकर्ता नहीं हूं!

— ड्रीमटाइक

@TylerH जिसके कारण मेरे उत्तर में, यह कहा गया है कि "यह ध्यान दिया जाना चाहिए कि यह विफल हो जाता है क्योंकि ये ब्राउज़र विनिर्देश का पालन करने में विफल रहे हैं।" युक्ति के लिंक के साथ!

— ड्रीमटेक

Answer 2

flex: 1 निम्नलिखित का अर्थ है:

flex-grow : 1;    ➜ The div will grow in same proportion as the window-size       
flex-shrink : 1;  ➜ The div will shrink in same proportion as the window-size 
flex-basis : 0;   ➜ The div does not have a starting value as such and will 
                     take up screen as per the screen size available for
                     e.g:- if 3 divs are in the wrapper then each div will take 33%.

Comments

@CookieMonster नहीं है, flex: 1इसका मतलब है 1 1 0... लेकिन IE पर यह है1 1 0px

— Ason

@LGSon, आप इकाई को आधार मान से छोड़ सकते हैं 1 1 0और 1 1 0pxसमतुल्य हैं। IE सिर्फ एक इकाई के साथ एक का समर्थन करने के लिए होता है।

— कुकीमेस्टर 01

@CookieMonster मुझे पता है कि फ्लेक्सबॉक्स कैसे काम करता है, मैं सिर्फ आपकी पहली टिप्पणी को सही कर रहा था, जो गलत है।

— असोन

@LGSon, फ्लेक्स कैसे है: 1 का मतलब 1 1 0px गलत है जब 1 1 0pxऔर 1 1 0समकक्ष हैं?

— CookieMonster 18

@CookieMonster वे हो सकता है प्रस्तुत करना ही है, लेकिन के रूप में जब लिए एक unitless मूल्य का उपयोग कर, समान नहीं होते हैं flex-basis, लोगों द्वारा अनदेखी की है और तत्व आकार अपने पर आधारित है flex-grow/ flex-shrink।

— Ason

Answer 3

सावधान रहे

कुछ ब्राउज़रों में:

flex:1; नहीं के बराबर हैflex:1 1 0;

flex:1;= flex:1 1 0n;(जहां n एक लंबाई इकाई है)।

• फ्लेक्स-ग्रो: एक संख्या जो यह निर्दिष्ट करती है कि आइटम बाकी लचीली वस्तुओं के सापेक्ष कितना बढ़ेगा।
• फ्लेक्स-हटना एक संख्या निर्दिष्ट करती है कि बाकी लचीली वस्तुओं के सापेक्ष आइटम कितना सिकुड़ जाएगा
• फ्लेक्स-आधार आइटम की लंबाई। कानूनी मूल्य: "ऑटो", "विरासत", या "%", "पीएक्स", "एम" या किसी अन्य लंबाई इकाई के बाद एक संख्या।

यहां मुख्य बिंदु यह है कि फ्लेक्स-बेस के लिए एक लंबाई इकाई की आवश्यकता होती है ।

उदाहरण के लिए Chrome में flex:1और flex:1 1 0विभिन्न परिणाम उत्पन्न करते हैं। अधिकांश परिस्थितियों में ऐसा प्रतीत हो सकता है कि flex:1 1 0;काम कर रहा है लेकिन आइए देखें कि वास्तव में क्या होता है:

उदाहरण

फ्लेक्स आधार को नजरअंदाज किया जाता है और केवल फ्लेक्स-ग्रो और फ्लेक्स-हटाई को लागू किया जाता है।

flex:1 1 0;= flex:1 1;=flex:1;

यह पहली नज़र में ठीक लग सकता है लेकिन अगर कंटेनर की लागू इकाई नेस्टेड है; अप्रत्याशित की उम्मीद!

इस उदाहरण को CHROME में आज़माएँ

.Wrap{
  padding:10px;
  background: #333;
}
.Flex110x, .Flex1, .Flex110, .Wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.Flex110 {
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
}
.Flex1 {
  -webkit-flex: 1;
  flex: 1;
}
.Flex110x{
  -webkit-flex: 1 1 0%;
  flex: 1 1 0%;
}

FLEX 1 1 0
<div class="Wrap">
  <div class="Flex110">
    <input type="submit" name="test1" value="TEST 1">
  </div>
</div>

FLEX 1
<div class="Wrap">
  <div class="Flex1">
    <input type="submit" name="test2" value="TEST 2">
  </div>
</div>

FLEX 1 1 0%
<div class="Wrap">
  <div class="Flex110x">
    <input type="submit" name="test3" value="TEST 3">
  </div>
</div>

संगतता

यह ध्यान दिया जाना चाहिए कि यह विफल हो जाता है क्योंकि कुछ ब्राउज़र विनिर्देश का पालन करने में विफल रहे हैं ।

पूर्ण फ्लेक्स विनिर्देश का उपयोग करने वाले ब्राउज़र:

• फ़ायरफ़ॉक्स - ✓
• एज - too (मुझे पता है, मैं भी चौंक गया था)
• क्रोम - एक्स
• बहादुर - एक्स
• ओपेरा - एक्स
• IE - (योग्य, यह लंबाई इकाई के बिना काम करता है, लेकिन एक के साथ नहीं।)

---

UPDATE 2019

लगता है कि क्रोम के नवीनतम संस्करणों ने इस मुद्दे को अंततः ठीक कर दिया है, लेकिन अन्य ब्राउज़र अभी भी नहीं आए हैं।

Chrome Ver 74 में परीक्षण किया गया और काम किया गया।

Comments

जब मान 0 होता है तो यूनिट अनिवार्य नहीं होता है। विनिर्देश कहते हैं flex: 1कि वही है flex: 1 1 0। अपने उदाहरण में यदि आप नियम के अनुसार .Wrapकक्षा को हटाते हैं तो .Flex110x,.Flex1, .Flex110, .Wrapअपेक्षा के अनुरूप काम करता है।

कृपया एक लिंक प्रदान करें, मैं उस विनिर्देश में नहीं पाया जा सकता जो आप कह रहे हैं। मैंने कुछ भी आविष्कार नहीं किया है, मेरा जवाब फ्लेक्सबॉक्स विनिर्देश पर आधारित है

@Obsidian यहां लिंक दिया गया है: w3.org/TR/css-flexbox-1 यदि आप 'शॉर्टहैंड' के हिस्से में जाते हैं, तो आप पाएंगे: "फ्लेक्स: [पॉजिटिव-नंबर] फ्लेक्स के बराबर: [पॉजिटिव-नंबर] 1 0 ...

— 18

@Toskan अधिकतम संगतता के लिए flex:1 1 0n;

— DreamTeK

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

— लीख