2014-06-05 6 views
17

मेरे पास एक अजीब समस्या है जिसमें मुझे परेशानी हो रही है। इसलिए मैं इस प्रोटोटाइप एचटीएमएल 5 टेम्पलेट पर काम कर रहा हूं जो फ्लेक्सबॉक्स का उपयोग करता है। हालांकि मैं एक मामूली समस्या में भाग रहा हूं। मैं मूल div को "औचित्य-सामग्री" संपत्ति लागू करके टेम्पलेट के साइडबार और सामग्री क्षेत्र में एक छोटी सी जगह की कोशिश कर रहा हूं। हालांकि यह साइडबार और सामग्री क्षेत्र के बीच उस जगह को जोड़ नहीं रहा है। मुझे यकीन नहीं है कि यह क्या है कि मैं गलत कर रहा हूं। तो अगर कोई मेरी मदद कर सकता है तो यह बहुत अच्छा होगा। अग्रिम में धन्यवाद!औचित्य-सामग्री संपत्ति काम नहीं कर रही है

#wrapper 
{ 
display: flex; 
flex-direction: row; 
justify-content: space-around; 
flex-flow: row wrap; 
flex: 1 100%; 
width:92.5%; 
align-self: center; 
padding-top: 3.5em; 
padding-bottom: 2.5em; 
margin: 0; 
} 

#wrapper article.content-main 
{ 
flex: 6; 
order: 2; 
} 

#wrapper article.content-main section 
{ 
background-color: rgba(149, 21, 130, 0.61); 
border: 2px solid #c31cd9; 
padding: 0.9em; 
} 

#wrapper aside 
{ 
flex: 1; 
padding: 0.4em; 
background-color: rgba(17, 208, 208, 0.56); 
border: 2px solid #15d0c3; 
position: sticky; 
} 

नोट:: किसी को भी मेरी एचटीएमएल के अन्य तत्वों के किसी भी संबंधी सीएसएस कोड के किसी भी अन्य टुकड़ा की जरूरत है तो कृपया

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <script src="../scripts/javascript/responsive_drop_down.js"></script> 
    <link href="../css/protoflexcss.css" rel="stylesheet" type="text/css" media="screen"/> 
    <title>Welcome to My Domain</title> 
</head> 
<body>  
     <header> 
      <h1>This is a placeholder <br /> 
       for header</h1> 
     </header> 
      <nav class="main"> 
       <div class="mobilmenu"></div> 
        <ul> 
         <li><a href="#">Home</a></li> 
         <li><a href="#">Video</a></li> 
         <li><a href="#">Pictures</a></li> 
         <li><a href="#">Audio</a></li> 
         <li><a href="#">Other Work</a></li> 
         <li><a href="#">About Me</a></li> 
         <li><a href="#">Contact Me</a></li> 
        </ul>  
      </nav> 
      <div id="wrapper"> 
       <article class="content-main"> 
        <section> 
         <h2>Heading goes here...</h2> 
         <time datetime="2014-05-21T02:43:00">Officialy Posted On May 21<sup>st</sup> 2:35 A.M.</time> 
         <p>Content will go here...</p> 
        </section> 
       </article> 
       <aside> 
        <p>More content soon...</p> 
       </aside> 
     </div> 
     <footer> 
       <div class="copyright"> 
        <span>All rights reserved 2014.</span> 
       </div> 
      <nav class="foot"> 
       <ul> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Video</a></li> 
        <li><a href="#">Pictures</a></li> 
        <li><a href="#">Audio</a></li> 
        <li><a href="#">Other Work</a></li> 
        <li><a href="#">About Me</a></li> 
        <li><a href="#">Contact Me</a></li> 
       </ul> 
      </nav> 
     </footer>    
    </body> 
</html> 

यहाँ प्रासंगिक सीएसएस है:

यहाँ मेरी एचटीएमएल है मुझे पता है, और मैं खुशी से इसे प्रश्न में भी जोड़ दूंगा।

+0

कृपया सुनिश्चित करें कि तत्व – Muhammed

उत्तर

37

justify-contentकेवल का प्रभाव तब होता है जब आपके फ्लेक्स आइटम मुक्त स्थान को अवशोषित करने के लिए फ्लेक्स किए जाते हैं। अधिकांश/कई मामलों में, कोई खाली स्थान नहीं छोड़ा जाएगा, और वास्तव में justify-content कुछ भी नहीं करेगा।

कुछ उदाहरण है जहां यह होगा एक प्रभाव है:

  • अपने फ्लेक्स आइटम सभी अनम्य (flex: none या flex: 0 0 auto), और कंटेनर तुलना में छोटे होते हैं।

  • यदि आपके फ्लेक्स आइटम लचीले होते हैं, लेकिन प्रत्येक लचीली वस्तुओं पर max-width के कारण सभी खाली स्थान को अवशोषित करने के लिए नहीं बढ़ सकता है।

उन दोनों मामलों में, justify-content अतिरिक्त अंतरिक्ष वितरण के आरोप में किया जाएगा।

आपके उदाहरण में, हालांकि, आपके पास flex: 1 या flex: 6 कोई max-width सीमा के साथ फ्लेक्स आइटम हैं। आपकी लचीली वस्तुएं सभी खाली स्थान को अवशोषित करने के लिए बढ़ेगी, और कुछ भी करने के लिए justify-content के लिए कोई जगह नहीं छोड़ी जाएगी।

+1

पर कोई स्पष्टता या कोई छद्म कोड नहीं है, ठीक है। हालांकि मैं एक साधारण फिक्स खोजने में सक्षम था। मैंने अभी लेख कंटेनर के बाईं ओर पैडिंग जोड़ा है। सब कुछ उसके बाद पूरी तरह ठीक काम करता प्रतीत होता है। – user3631048

+1

धन्यवाद! चौड़ाई निर्दिष्ट करना समाधान था! – Crashalot

+0

यदि इस उत्तर में उल्लिखित सीमाओं के बावजूद 'औचित्य-सामग्री' के अंदर पाठ है तो उपयोगी है। –

2

यह उत्तर बेवकूफ हो सकता है, लेकिन मैंने एक ही समस्या का पता लगाने में कुछ समय बिताया।

मेरे साथ क्या हुआ था display: flex कंटेनर पर सेट नहीं किया गया था। और निश्चित रूप से, justify-content उस संपत्ति के बिना काम नहीं करेगा।

संबंधित मुद्दे