दिलचस्प पोस्ट
कैसे पता कैसे एक सरणी मान मौजूद है? दो सबमिट बटन और दो "लक्ष्य" विशेषताओं के साथ एचटीएमएल फार्म मैं Xcode 6 या अधिक में एक श्रेणी कैसे बना सकता हूं? वेबसाइट पर कई बार मतदान करने वाले उपयोगकर्ताओं को रोकना क्या ऐरे के साथ अनूठा_पीटआर के लिए कोई फायदा है? दो डेटाबेस के बीच विदेशी कुंजी संबंध जोड़ें क्या हाइबरनेट / जेपीए में कॉलम के नामों को गतिशील रूप से परिभाषित करना संभव है? jquery .html () बनाम .append () सी # में ऑडियंस बनाने का एक आसान तरीका है? IOS UIWebView में जावास्क्रिप्ट console.log () एडब्ल्यूएस एसएनएस के साथ एफसीएम सामान्य एक्सटेंशन विधि के साथ कोई प्रकार का अनुमान नहीं .css () स्वचालित रूप से विक्रेता उपसर्ग जोड़ता है? bash – स्वचालित रूप से अंतिम निष्पादित कमांड को एक चर में स्वतः कैप्चर करते हैं लाइबन्स के साथ एचटीएमएल डिविज़ को कैसे जोडें?

फ्लेक्स-अपेक्षित रूप में फ्लेक्स आइटम नहीं आकार लेना

ऐसा लगता है कि फ्लेक्स डिवेल के अंदर की सामग्री flex-grow प्रॉपर्टी से संबंधित इसकी गणना आकार को प्रभावित करती है। क्या मुझसे कुछ गलत हो रही है?

नीचे दिए गए बेला में, आपको एक नंबर पैड दिखाई देगा। सभी पंक्तियों में निचले पंक्ति को छोड़कर 3 नंबर होते हैं उस पंक्ति में '0' 2 अंकों की चौड़ाई होना चाहिए, इसलिए flex-grow: 2 और ':' (बृहदान्त्र) 1 संख्या का आकार है, इसलिए flex-grow: 1

क्या मुझसे कोई चूक हो रही है?

'0' के दाईं ओर 8, 5 और 2 के ऊपर से जुड़ा होना चाहिए। यह थोड़ी दूर है

यहां छवि विवरण दर्ज करें

 .numbers { display: flex; flex-direction: column; } .row { display: flex; flex-direction: row; flex-grow: 1; justify-content: space-between; } .button { display: flex; flex-grow: 1; justify-content: center; align-items: center; margin: 5px; border-radius: 5px; border: 1px solid gray; background: rgba(255, 255, 255, 0.2); cursor: pointer; } .button#number0 { flex-grow: 2; } .button#colon { flex-grow: 1; } 
 <div class="numbers"> <div class="row"> <div class="button number" id="number1">1</div> <div class="button number" id="number2">2</div> <div class="button number" id="number3">3</div> </div> <div class="row"> <div class="button number" id="number4">4</div> <div class="button number" id="number5">5</div> <div class="button number" id="number6">6</div> </div> <div class="row"> <div class="button number" id="number7">7</div> <div class="button number" id="number8">8</div> <div class="button number" id="number9">9</div> </div> <div class="row"> <div class="button number" id="number0">0</div> <div class="button" id="colon">:</div> </div> </div> 

https://jsfiddle.net/0r4hemdu/

वेब के समाधान से एकत्रित समाधान "फ्लेक्स-अपेक्षित रूप में फ्लेक्स आइटम नहीं आकार लेना"

ऐसा लगता है कि फ्लेक्स डिवेल के अंदर की सामग्री flex-grow प्रॉपर्टी से संबंधित इसकी गणना आकार को प्रभावित करती है। क्या मुझसे कुछ गलत हो रही है?

आपकी समस्या का स्रोत फ्लेक्स आइटम के अंदर की सामग्री नहीं है

नीचे दिए गए बेला में, आपको एक नंबर पैड दिखाई देगा। सभी पंक्तियों में निचले पंक्ति को छोड़कर 3 नंबर होते हैं उस पंक्ति में '0' 2 अंकों की चौड़ाई होना चाहिए, इसलिए flex-grow: 2 और ':' 1 संख्या का आकार हो, इसलिए flex-grow: 1 । क्या मुझसे कोई चूक हो रही है?

हाँ। flex-grow प्रॉपर्टी की आपकी व्याख्या गलत है। flex-grow का उद्देश्य फ्लेक्स आइटम के आकार को परिभाषित करने के लिए नहीं है इसका काम फ्लेक्स आइटम के बीच फ्लेक्स कंटेनर में मुफ्त स्थान वितरित करना है

flex-grow: 1 फ्लेक्स मदों के समूह में, आप उनसे कह रहे हैं कि वे स्वयं के बीच समान रूप से खाली स्थान वितरित करें। यही कारण है कि, आपके डेमो में, पंक्तियों में से एक, दो और तीनों ने समान रूप से फ्लेक्स आइटम आकार दिए हैं।

जब आप flex-grow: 2 , तो आप flex-grow: 2 ग्रोथ वाले आइटम के रूप में दो बार अधिक से अधिक खाली स्थान का उपभोग करने के लिए फ्लेक्स आइटम कह रहे flex-grow: 1 । इसका जरूरी मतलब नहीं है कि फ्लेक्स आइटम का आकार दो बार होगा

इसके अलावा, आपके मामले में, भले ही flex-grow: 2 अर्थ दो बार आकार से होता है, तो यह कैसे पता चलेगा कि ऊपर की पंक्तियों की दूसरी चौड़ाई 10px मार्जिन को उसकी चौड़ाई की गणना (जो आप चाहते हैं संरेखण हासिल करने के लिए आवश्यक हो) को शामिल करना चाहिए? यहां छवि विवरण दर्ज करें

कारण संरेखण पंक्ति के चारों ओर बंद है, क्योंकि इसमें केवल एक 10px मार्जिन है

आप देखेंगे कि यदि आप मार्जिन नियम को निकालते हैं तो आप अपना वांछित संरेखण प्राप्त करते हैं।

 .numbers { display: flex; flex-direction: column; } .row { display: flex; flex-direction: row; flex-grow: 1; justify-content: space-between; } .button { display: flex; flex-grow: 1; justify-content: center; align-items: center; /* margin: 5px; */ border-radius: 5px; border: 1px solid gray; background: rgba(255, 255, 255, 0.2); cursor: pointer; } .button#number0 { flex-grow: 2; } .button#colon { flex-grow: 1; } 
 <div class="numbers"> <div class="row"> <div class="button number" id="number1">1</div> <div class="button number" id="number2">2</div> <div class="button number" id="number3">3</div> </div> <div class="row"> <div class="button number" id="number4">4</div> <div class="button number" id="number5">5</div> <div class="button number" id="number6">6</div> </div> <div class="row"> <div class="button number" id="number7">7</div> <div class="button number" id="number8">8</div> <div class="button number" id="number9">9</div> </div> <div class="row"> <div class="button number" id="number0">0</div> <div class="button" id="colon">:</div> </div> </div> 

अपडेट 3:

मुझे पता चला कि मिसाइलमेंटमेंट से छुटकारा पाने के लिए अभी तक एक और तरीका है I

यह संस्करण, 2: एनडी अपडेट के साथ, मूल एचटीएमएल के साथ काम करता है, और बटन बनाने के लिए छद्म तत्वों का उपयोग कर रहा है, बटन हॉवर / क्लिक प्रभाव शामिल हैं।

flex केवल संस्करण

 .row { width: 60%; margin: auto; display: flex; } .button { flex: 0 0 33.3%; text-align: center; position: relative; padding: 10px 5px; box-sizing: border-box; pointer-events: none; } .button#number0 { flex: 0 0 66.6%; } .button:before, .button:after { content: " "; border-radius: 5px; border: 1px solid gray; cursor: pointer; position: absolute; left: 5px; top: 5px; right: 5px; bottom: 5px; pointer-events: auto; } .button:before { background: rgba(255, 255, 255, 0.9); z-index: -1 } .button:hover:before { background: rgba(0, 0, 0, 0.1); } .button:hover:after { border: 2px solid red; } .button:active:before { background: rgba(255, 0, 0, 0.5); } 
 <div class="numbers"> <div class="row"> <div class="button number" id="number1">1</div> <div class="button number" id="number2">2</div> <div class="button number" id="number3">3</div> </div> <div class="row"> <div class="button number" id="number4">4</div> <div class="button number" id="number5">5</div> <div class="button number" id="number6">6</div> </div> <div class="row"> <div class="button number" id="number7">7</div> <div class="button number" id="number8">8</div> <div class="button number" id="number9">9</div> </div> <div class="row"> <div class="button number" id="number0">0</div> <div class="button" id="colon">:</div> </div> </div> 

मुझे लगता है कि Michael_B ने कहा कि सब कुछ सही है। केवल समाधान थोड़ा अजीब है मैं व्यक्तियों को पसंद नहीं करता। यह सही नहीं लगता है।

आपके पास समस्या एक अधिक सामान्य है आपने एक तत्व पर कई ज़िम्मेदारियां डालीं इस मामले में यह .button वर्ग। फ्लेक्स के साथ फ्लेक्स और मार्जिन बहुत अधिक जिम्मेदारी है। इसे अलग करने का प्रयास करें इसका अर्थ अधिक डोम तत्व है, लेकिन यह आपको बहुत दर्द को बचाता है।

 .numbers { display: flex; flex-direction: column; max-width: 200px; margin: 0 auto; } .row { display: flex; flex-direction: row; flex-grow: 1; justify-content: space-between; } .row > .box { display: flex; flex-basis: 33.3333%; justify-content: center; align-items: center; } .row > .box.box-2 { flex-basis: 66.6667%; } .button { border-radius: 5px; border: 1px solid gray; background: rgba(255, 255, 255, 0.2); cursor: pointer; width: auto; text-align: center; margin: 5px; width: 100%; } 
 <div class="numbers"> <div class="row"> <div class="box"><div class="button number" id="number1">1</div></div> <div class="box"><div class="button number" id="number2">2</div></div> <div class="box"><div class="button number" id="number3">3</div></div> </div> <div class="row"> <div class="box"><div class="button number" id="number4">4</div></div> <div class="box"><div class="button number" id="number5">5</div></div> <div class="box"><div class="button number" id="number6">6</div></div> </div> <div class="row"> <div class="box"><div class="button number" id="number7">7</div></div> <div class="box"><div class="button number" id="number8">8</div></div> <div class="box"><div class="button number" id="number9">9</div></div> </div> <div class="row"> <div class="box box-2"><div class="button number" id="number0">0</div></div> <div class="box"><div class="button" id="colon">:</div></div> </div> </div> 

फ्लेक्सबॉक्स मार्जिन पर अच्छी तरह से प्रतिक्रिया नहीं करता, मेरी राय में

मैं जो बेहतर दृष्टिकोण / कार्यपालक पसंद करता हूं, यह सुनिश्चित करना है कि सभी फ्लेक्स बच्चों के पास 0 हाशिए हैं, फ्लेक्स कंटेनर को justify-content: space-between; करने के लिए सेट करें- justify-content: space-between; , और फिर बच्चों को कुल चौड़ाई 100% से कम दे दें शेष आपका मार्जिन होगा

दूसरे शब्दों में, यदि आप प्रति पंक्ति दो तत्व चाहते हैं, तो प्रत्येक को 49% चौड़ा करना चाहिए और आपके पास 2% स्थान होगा। तीन तत्व, प्रत्येक 32% चौड़े होते हैं और आपके पास उन दोनों के बीच 2% होगा कैलकुलेटर उदाहरण में, 0 सेल 66% चौड़ा होना चाहिए और शेष 32%।

संपादित करें: ध्यान दें, क्योंकि कारणों से (अर्थात् content-box भयानक है), यदि आपके किसी भी बच्चे की सीमाएं हैं तो आपको box-sizing: border-box का उपयोग करने की आवश्यकता होगी box-sizing: border-box मेरे सुझाव के लिए box-sizing: border-box ठीक से काम करने के लिए।

https://jsfiddle.net/r3L1mtbe/2/

पार ब्राउज़र समर्थन को समायोजित करने के लिए लघुकोड का उपयोग करना महत्वपूर्ण है:

 .row { display: flex; flex-direction: row; /* <-- this is the default so unnecessary to state */ flex-grow: 1; justify-content: space-between; } .button { display: flex; /* flex-grow: 1; replace with shorthand */ flex:1 0 100%; /* probably making the "width: 100%;" unnecessary */ justify-content: center; } .button#number0 { /* flex-grow: 2; replace with shorthand */ flex:2 0 100%; } .button#colon { /* flex-grow: 1; replace with shorthand */ flex:1 0 100%; }